Beberapa alat pemformatan bahagian hadapan yang patut diketahui pada tahun 2023 [Ringkasan]

Dalam era front-end yang besar, pelbagai rantai alat front-end sentiasa muncul, termasuk eslint, prettier, husky, commitlint, dsb. adakah terlalu banyak perkara. Masa juga trouble???, cara menggunakan ini dengan betul adalah sesuatu yang perlu dikuasai oleh setiap pembangun bahagian hadapan, sila dapatkan???

eslint

Kali ini projek kejuruteraan bahagian hadapan adalah berdasarkan tindak balas dan perkara yang sama berlaku kepada pengguna vue, kecuali pakej pergantungan individu adalah berbeza.

Gunakan rantaian ekologi eslint untuk menyeragamkan spesifikasi pembangun bagi sintaks asas js/ts. Halang ahli pasukan daripada menulis secara rawak.

Pakej eslint utama yang digunakan di sini adalah seperti berikut:

"eslint": "^8.33.0",  // 这个是eslint的主包
"eslint-plugin-react": "^7.32.2",  // 这是react基于eslint来做的语法规范插件
"eslint-plugin-react-hooks": "^4.6.0", // 这是 react-hooks 语法基于eslint做的插件
"@typescript-eslint/eslint-plugin": "^5.50.0",  // typescript 基于eslint来做的插件
"@typescript-eslint/parser": "^5.50.0",  // typescript 基于eslint做的语法解析器，使得eslint可以约束ts语法

Gunakan pernyataan berikut untuk mengikuti kebergantungan:

pnpm i eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

Seterusnya, anda perlu menulis spesifikasi eslint ke dalam fail konfigurasi Anda boleh membuat satu di bawah direktori akar projek .eslintrc.cjs

module.exports = {
    'env': {
        'node': true,   // 标志当前的环境，不然使用module.exports 会报错
        'es2021': true
    },
    extends: [
      'eslint:recommended',  // 使用eslint推荐的语法规范
      'plugin:react/recommended',  // react推荐的语法规范
      'plugin:@typescript-eslint/recommended' // ts推荐的语法规范
    ],
    parser: '@typescript-eslint/parser',  // 使用解析器来解析ts的代码，使得eslint可以规范ts的代码
    parserOptions: {
      ecmaFeatures: {
        jsx: true  // 允许使用jsx的语法
      },
      ecmaVersion: 'latest',  // es的版本为最新版本
      sourceType: 'module'  // 代码的模块化方式，使用module的模块方式
    },
    plugins: ['react', '@typescript-eslint', 'react-hooks'],  // 使用对应的react, react-hooks, @typescript-eslint 等插件
    rules: {
      quotes: ['error', 'single'],  // 配置单引号的规则，如果不是单引号，报错
      semi: 'off',  //  不需要使用分号；
      'react/react-in-jsx-scope': 'off'  // 在jsx中不需要导入 react的包
    }
  }

Seterusnya, tambahkan arahan pada skrip package.json<. 🎜 >

"lint": "eslint --ext .ts,.tsx,.js,.jsx ./" // 使用eslint 规范 ts,tsx,js,jsx的代码

Kesan

Format yang tidak teratur dalam kod didedahkan kini. Tetapi dari segi kod pemformatan,

melakukan kerja yang lebih baik, jadi mari kita gunakan prettier untuk memformat kod prettier

lebih cantik

ialah kod sumber terbuka. pakej pemformatan menyokong pelbagai alat menulis kod ia menyokong prettier, vscode, dsb., jadi bagaimana untuk mengintegrasikannya? webstorm

Gunakan penyataan berikut untuk memasang kebergantungan:

pnpm i prettier eslint-plugin-prettier eslint-config-prettier

Berikut menerangkan untuk kegunaan pakej ini, jika tidak, anda akan memasangnya secara tidak sengaja

"prettier": "^2.8.3",  // prettier 主包
"eslint-config-prettier": "^8.6.0",  // eslint 和prettier的共同配置
"eslint-plugin-prettier": "^4.2.1",  // 在eslint当中，使用prettier为插件，才能一起使用

Pasang Selepas pergantungan yang baik, kita juga perlu menambah konfigurasi yang lebih cantik dalam

seperti berikut: eslitrc.cjs

{
 extends:[
 ...,
+ 'prettier', // prettier
+ 'plugin:prettier/recommended' // prettier推荐的配置  
 ],
+ plugins:[...,'prettier'],
rules: {
+    'prettier/prettier': 'error', // eslint 和prettier 用prettier的错误
    }
}

Seterusnya, tambahkan skrip dalam

package.json

+ "prettier": "eslint --fix --ext .ts,.tsx,.js,.jsx --quiet ./"

Pada masa ini, kami Anda juga perlu mengkonfigurasi fail mana yang tidak memerlukan pemformatan kod, jadi buat

di bawah direktori akar dan tambah kandungan berikut: .prettierignore

node_modules
package.json
pnpm-lock.yaml
dist

Kesan

Pembaikan telah berjaya, tetapi amaran telah dilaporkan di sini Penyelesaiannya adalah seperti berikut:

Tambah konfigurasi sebelumnya pada penghujung

seperti berikut: eslintrc.cjs

<🎜. >

+ settings: {
+    react: {
+      version: 'detect'
+    }
+  }

Mengkonfigurasi pemformatan automatik

Anda perlu melaksanakan skrip dalam terminal setiap kali, yang agak rumit Bolehkah anda menetapkan pemformatan automatik?

Jawapannya ya

Buka Tetapan

Masukkan

, kemudian pilih
2. Penyusun Teksfomatter, pilih prettier-Code formatter

dan kemudian cari

dan pilihnya.
3. formate on save

Kesan berikut akan muncul:

Tekan

dan ia akan secara automatik Kod pemformatan???

ctrl s

husky

Sehingga di atas, alat pemformatan kod dan semakan spesifikasi kod adalah baik Ini adalah tempatan, jadi kami masih memerlukan Apabila menyerahkan kod , lakukan operasi yang lebih cantik sebelum melakukan, jadi tidak perlu melakukannya secara manual.

Gunakan skrip untuk memasang pakej pergantungan berikut

Kami mulakan melalui

pnpm i husky -D

dalam terminal

npx husky install husky

kami Anda juga perlu menjana

cangkuk untuk melaksanakan

pre-commitnpm run lint

Selepas pemasangan selesai, fail baharu akan ditambah dalam direktori .husky

npx husky add .husky/pre-commit "npm run lint"  // 这句话的意思是说，在commit之前先执行 npm run lint脚本

pre-commit

Perlu diingatkan bahawa kita perlu mendaftarkan perintah

dalam

dan memasang package.json selepas projek prepare selesai 🎜>

+ "prepare": "husky install"

上面咱们是自己手动 npx husky install的，我们需要让后面使用咱们配置的人自动来初始化 husky

但是大家如果再深入一步，就会想到???。既然我内容都管控好了，是不是需要把 commit -m 'xxx' 中的msg 也管控下呀???

使用下面的命令来安装包：

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D

包意思解析

 "@commitlint/cli": "^17.4.2", // 规范提交信息
 "@commitlint/config-conventional": "^17.4.2",  // commitlint 常用的msg配置
 "commitlint": "^17.4.2" // commitlint 主包

安装好这些包后，需要在根目录添加一个 .commitlintrc.cjs来配置咱们的commitlint的配置:

module.exports = {
  extends: ['@commitlint/config-conventional']
}

有了这些配置，commit是否生效呢？

答案是 no, 还需要在git hooks中添加一个方法

在终端执行下面的命令

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

然后会在.husky中生成一个新的文件commit-msg

效果

接下来就是见证奇迹的时刻???

对于乱写commit 信息就过不了哦???

lint-staged

对于细心的同学可能会发现，我们每一次提交都会 prettier整个目录的所有问题，大大的降低了咱们编码的速度。所以咱们还需要做一件事情，那就是 只格式化需要提交的代码，其他的就不需要格式化了

使用下面命令安装依赖

pnpm i lint-staged -D

然后在package.json中新增如下内容

+ "lint-staged": {
+     "**/*.{js,jsx,tsx,ts}": [  
+          "eslint --fix"
+       ]
+    }

上面那段脚本的意思是 只对 .js,.jsx, .ts,.tsx 后缀文件进行eslint的修复，其他的就不进行格式化和修复了

有了这个，还需要对 pre-commit 这个钩子就行修改内容

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

- npm run lint
+ npx --no -- lint-staged

如此就大功告成啦???

（学习视频分享：web前端入门）

Atas ialah kandungan terperinci Beberapa alat pemformatan bahagian hadapan yang patut diketahui pada tahun 2023 [Ringkasan]. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!