在大前端時代，前端的各種工具鏈窮出不斷，有eslint, prettier, husky, commitlint 等, 東西太多有的時候也是trouble???,怎麼正確的使用這個是每一個前端開發(fā)者都需要掌握的內(nèi)容，請上車? ??

eslint

本次前端工程化的項目是基於react來的，vue用戶也是同樣的道理，只是有個別的依賴包不一樣。

使用eslint的生態(tài)鏈來規(guī)範開發(fā)者對js/ts基本語法的規(guī)格。防止團隊的成員亂寫.

這裡主要使用到的eslint的套件有以下幾個：

"eslint": "^8.33.0",  // 這個是eslint的主包
"eslint-plugin-react": "^7.32.2",  // 這是react基于eslint來做的語法規(guī)范插件
"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語法

使用的以下語句來按照依賴：

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

接下來需要對eslint的規(guī)格寫入設定檔中，可以在專案的根目錄下方建立一個.eslintrc.cjs

module.exports = {
    'env': {
        'node': true,   // 標志當前的環(huán)境，不然使用module.exports 會報錯
        'es2021': true
    },
    extends: [
      'eslint:recommended',  // 使用eslint推薦的語法規(guī)范
      'plugin:react/recommended',  // react推薦的語法規(guī)范
      'plugin:@typescript-eslint/recommended' // ts推薦的語法規(guī)范
    ],
    parser: '@typescript-eslint/parser',  // 使用解析器來解析ts的代碼，使得eslint可以規(guī)范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'],  // 配置單引號的規(guī)則，如果不是單引號，報錯
      semi: 'off',  //  不需要使用分號；
      'react/react-in-jsx-scope': 'off'  // 在jsx中不需要導入 react的包
    }
  }

接下來在package.json 的scripts 中加入一條指令

"lint": "eslint --ext .ts,.tsx,.js,.jsx ./" // 使用eslint 規(guī)范 ts,tsx,js,jsx的代碼

效果

程式碼中的不規(guī)範的格式就暴露出來了，現(xiàn)在可以來修復並且格式化程式碼。但在格式化程式碼方面，prettier做的更好點，所以咱們來使用prettier來進行程式碼格式化

prettier

prettier 是一款開源的程式碼格式化包，支援多種程式碼編寫工具，常見的vscode, webstorm 等，他都是支援的，那麼怎麼給他集成起來呢？

使用下面語句來安裝依賴：

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

下面來解釋下，這些套件是乾啥用的，不然稀里糊塗安裝了它

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

安裝好依賴後，咱們也需要在eslitrc.cjs中加入prettier的設定如下：

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

接下來在package.json中加入一段腳本

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

此時，咱們還需要配置哪些檔案是不需要進行程式碼格式化的，所以在根目錄下方建立.prettierignore增加如下：

node_modules
package.json
pnpm-lock.yaml
dist

效果

修復成功，但這裡也報了一個警告，這個的解決方法如下：

#在eslintrc.cjs的最後增加上一段配置如下：

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

設定自動格式化

每次都需要在終端機執(zhí)行腳本，有點小複雜，能不能設定自動格式化呢？

答案是可以的

1. 開啟設定

2. ##fomatter,然後選取文字編譯器後，選擇prettier-Code formatter

##然後搜尋formate on save,選取即可

#就可以出現(xiàn)下面的效果了：

按ctrl s 會自動的格式化程式碼喔???

husky

到上面為止，代碼的格式化工具和代碼規(guī)範檢查就好了,這是本地的，所以咱們還需要在提交代碼的時候，在commit 之前，進行prettier 操作，就不需要手動啦。 使用腳本安裝下面的依賴套件<pre class='brush:php;toolbar:false;'>pnpm i husky -D</pre>我們在終端機透過 npx husky install 來初始化 husky

###### #######我們還需要產(chǎn)生###pre-commit###鉤子的時候來執(zhí)行###npm run lint######

npx husky add .husky/pre-commit "npm run lint"  // 這句話的意思是說，在commit之前先執(zhí)行 npm run lint腳本

###安裝完成後，會在.husky 目錄新增一個檔案###pre-commit##################要注意的是，我們需要在###package.json### 註冊### prepare### 指令，在專案進行###pnpm i### 之後就行###Huksy### 的安裝，指令如下:###

+ "prepare": "husky install"

上面咱們是自己手動 npx husky install的，我們需要讓后面使用咱們配置的人自動來初始化 husky

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

使用下面的命令來安裝包：

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

包意思解析

 "@commitlint/cli": "^17.4.2", // 規(guī)范提交信息
 "@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中添加一個方法

在終端執(zhí)行下面的命令

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

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

效果

接下來就是見證奇跡的時刻???

對于亂寫commit 信息就過不了哦???

lint-staged

對于細心的同學可能會發(fā)現(xiàn)，我們每一次提交都會 prettier整個目錄的所有問題，大大的降低了咱們編碼的速度。所以咱們還需要做一件事情，那就是 只格式化需要提交的代碼，其他的就不需要格式化了

使用下面命令安裝依賴

pnpm i lint-staged -D

然后在package.json中新增如下內(nèi)容

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

上面那段腳本的意思是 只對 .js,.jsx, .ts,.tsx 后綴文件進行eslint的修復，其他的就不進行格式化和修復了

有了這個，還需要對 pre-commit 這個鉤子就行修改內(nèi)容

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

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

如此就大功告成啦???

（學習視頻分享：web前端入門）

以上是2023年值得了解的幾個前端格式化工具【總結(jié)】的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！