前端工程化，這個范疇中的一部分就是在項目中實現(xiàn)代碼編寫和提交時候的自動格式校驗和美化，這一步離不開如題幾個工具。
今天就來學習husky、eslint、prettier、lint-staged幾個工具的使用。

husky

1.首先在項目中安裝它，本項目以yarn為例：

yarn add husky -D

2.在項目中初始化它（Windows電腦一定要用git bash命令行，不然后面生成的.husky目錄缺少-目錄）

npx husky init

這一步的時候很多博文會說用npx husky install命令，但其實這個命令已經是DEPRECATED（強烈不推薦）的，也許是和husky版本有關，當前（2024年7月22日）我默認安裝的是"husky": "^9.1.1"。

這一步以后會在項目中創(chuàng)建出一個husky的配置目錄，
其中的-目錄文件全部都是git鉤子文件：

image.png

同時在package.json中自動創(chuàng)建出一個npm命令

image.png

這樣的話其他人在拿到這個項目后執(zhí)行install安裝依賴后自動執(zhí)行此命令,與你同步了

3.測試husky

在.husky/pre-commit中添加如下測試代碼，然后commit一次，發(fā)現(xiàn)會正確執(zhí)行這里：

echo "hello world"

image.png

說明husky成功捕獲commit鉤子。

lint-staged

通常husky與lint-staged搭配使用，lint-staged用于讓eslint僅對添加到了暫存區(qū)的文件校驗，避免了不必要的每次提交時eslint全局校驗。

1. 安裝

yarn add lint-staged -D

2. 配置
   在package.json中增加：

"scripts": {
    "lint:lint-staged": "lint-staged",
  },
  "lint-staged": {
    "src/**/*.{ts,tsx,js,jsx}": [
      "eslint --fix -c ./eslint.config.js"
    ]
  },

其中-c ./eslint.config.js可以省去
接著在.husky的pre-commit中增加npm run lint:lint-staged

如果是老版本的eslint則需要多加上git add，這里已經不需要了，如果你加了，它會提示你不再需要。

有的博文說要下面一步，其實并不需要：
在package.json中添加:

"husky": {
        "hooks": {
            "pre-commit": "lint-staged",
        }
    }

3. 測試
   

   先在.husky>pre-commit中寫上執(zhí)行腳本：
   image.png

然后執(zhí)行git的commit命令，執(zhí)行效果如下

image.png

commitlint (可以不用它，見下一節(jié))

husky幫我們在提交的時候模擬git鉤子，但如果要配置提交時候的message格式校驗，則需要commitlint 的幫助。

首先安裝它：

yarn add @commitlint/cli @commitlint/config-conventional -D

新增配置文件

在項目根目錄中新增配置文件.commitlintrc.js，寫入一下內容（僅作為測試，每個團隊習慣不一樣）

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
        'type-enum': [
            2,
            'always',
            [
                'build',
                'ci',
                'chore',
                'docs',
                'feat',
                'fix',
                'perf',
                'refactor',
                'revert',
                'style',
                'test',
                'addLog',
            ],
        ],
    },
};

增加husky配置

回到 .husky，在-目錄找到commit-msg文件，增加：

#!/usr/bin/env sh

npx --no-install commitlint --edit "$1"

$1是什么？有$1，那么$0 是什么？嘗試用echo -e $0 $1打印它們倆：

.husky/_/commit-msg .git/COMMIT_EDITMSG

并沒有\$2（手動狗頭U?ェ?*U）

有的博文說要下面一步，其實并不需要：

接著在package.json 增加 husky 配置，增加一個鉤子，并且改寫husky的commit-msg鉤子"husky": { "hooks": { "pre-commit": "lint-staged", "commit-msg": "commitlint --config .commitlintrc.js -E HUSKY_GIT_PARAMS" } }

測試效果

image.png

不需要commitlint？

其實也不必需要commitlint，利用husky可以在commit的時候獲取message，可直接使用正則表達式來校驗message是否合格以此控制commit是否繼續(xù)提交
先去掉以上關于commitlint的操作，回到最開始的時候。
仍然是 .husky，在-目錄找到commit-msg文件，將其拷貝出至上一層目錄中。然后在其中增加以下內容：

#!/usr/bin/env sh

# npx --no-install commitlint --edit "$1"

commit_msg=`cat $1`

msg_re="(^(feat|fix|docs|style|refactor|test|chore|revert)(\([A-Z]+-[0-9]+\)): .{1,100})|(^Merge .*branch [\s\S]*)|(^Revert [\s\S]*)"

if [[ ! $commit_msg =~ $msg_re ]]
then
    echo -e "Commit message does not follow the pattern: $msg_re , eg:\nfeat(CARCN-1479): add comments\\nfix(CARCN-1478): handle events on blur (close #28)\n Please reference the git commit documentation : https://porschedigital.atlassian.net/wiki/spaces/TECHCN/pages/6496256003/Git+Commit+policy+including+Frontend+and+Backend"

    # 異常退出
    exit 1
fi

其中$1是打印出來是.git/COMMIT_EDITMSG，用cat $1執(zhí)行后得到的就是commit時候輸入的message內容。

測試效果

image.png

eslint

安裝

eslint不像husky去先install然后再配置，而是直接執(zhí)行配置命令 （https://eslint.nodejs.cn/）：

npm init @eslint/config@latest

image.png

image.png

安裝及使用過程中遇到的問題：

1. 一定要按照eslint官網說的nodejs版本相匹配，不然執(zhí)行eslint校驗的時候會出現(xiàn)莫名錯誤導致無法查找，比如這樣的報錯：
   image.png

2. 要設置react版本，不然會報如下警告
   image.png
   
   
   設置方式：
   image.png

3. 在eslint.config.js中rules一定要在最后才能生效
   image.png
   
   原因是只有放在后部，才能覆蓋前部的配置，詳見：https://eslint.nodejs.cn/docs/latest/use/configure/rules#%E4%BD%BF%E7%94%A8%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6