前端工程化-husky、eslint、prettier、lint-staged的使用

前端工程化，这个范畴中的一部分就是在项目中实现代码编写和提交时候的自动格式校验和美化，这一步离不开如题几个工具。
今天就来学习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"。

这一步以后会在项目中创建出一个husky的配置目录，
其中的-目录文件全部都是git钩子文件：

image.png

同时在package.json中自动创建出一个npm命令

image.png

这样的话其他人在拿到这个项目后执行install安装依赖后自动执行此命令,与你同步了

3.测试husky

在.husky/pre-commit中添加如下测试代码，然后commit一次，发现会正确执行这里：

echo "hello world"

image.png

说明husky成功捕获commit钩子。

lint-staged

通常husky与lint-staged搭配使用，lint-staged用于让eslint仅对添加到了暂存区的文件校验，避免了不必要的每次提交时eslint全局校验。

安装

yarn add lint-staged -D

配置
在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",
        }
    }

测试

先在.husky>pre-commit中写上执行脚本：

image.png

然后执行git的commit命令，执行效果如下

image.png

可以看到commit后实际执行了package.json中scripts里的"lint:lint-staged"指令，该指令执行的就是package.json中lint-staged配置的内容

commitlint (可以不用它，见下一节)

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是否继续提交
先去掉以上关于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执行后得到的就是commit时候输入的message内容。

测试效果

image.png

eslint

安装

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

npm init @eslint/config@latest

执行此命令后根据需要选择配置：

image.png

同时会在项目根目录生成一个配置文件eslint.config.js：（老版本是生成.eslintrc[.json/js] 和 .eslintignore）

image.png

安装及使用过程中遇到的问题：

一定要按照eslint官网说的nodejs版本相匹配，不然执行eslint校验的时候会出现莫名错误导致无法查找，比如这样的报错：

image.png
要设置react版本，不然会报如下警告

image.png

设置方式：

image.png

在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