前言
- 最近由于一个简单的语法错误，导致了一个线上问题的产生，实在是惭愧不已
- 为此，我开始寻找办法来规避这类语法错误导致的问题
- 前置环境：pnpm(如果是npm，将下述指令中的pnpm替换为npm即可)
正文
- 现在的很多项目都在使用各类代码规范校验的插件，来对项目的代码来进行检查
- 目前应用最广泛的应该就是eslint了
- 然而，eslint的原始版本命令，是会对整个项目代码进行校验的，这会造成两个缺陷
- 不相干，没有变更过的代码文件也会跟着报错，过多的报错将会浪费我们的时间，也难以从中发现真正需要处理的问题代码
- 当项目愈发庞大时，针对整个项目的lint校验将会非常耗时
- 这时候就轮到husky和lint-staged上场了
husky
- husky是一个git hook工具，可以让我们很方便的植入git hooks，让我们在触发对应的hook时，执行相对应的命令
- 本文主要用到的则是pre-commit这一个hook，这个hook在我们执行git commit命令时触发，此时执行对应的代码校验命令，可以防止不规范的代码被提交到git库中
- 安装husky，可以执行如下命令：
pnpm install --save-dev husky
- 完成后，执行
pnpm exec husky init,来为项目初始化husky，启用git hooks
- 成功后，会发现项目文件中新增了.husky文件夹，以及一个pre-commit文件,而package.json文件中也新增了一个prepare文件
- 接着我们需要在pre-commit文件中，添加需要执行的命令，比如我们本文需要集成的lint-staged功能：
pnpx lint-staged
lint-staged
- lint-staged是一个git hooks工具，它允许我们针对git暂存区的文件进行代码校验
- 安装运行
pnpm install --save-dev lint-staged
- 安装完成后，我们需要在package.json文件中新增一个lint-staged字段，用于配置lint-staged的配置信息
{
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": ["eslint --cache"]
}
}
- 配置样例如上,上述配置的意思为暂存区中，src文件夹下的js,jsx,ts,tsx后缀文件，在执行git commit命令时，会执行
eslint --cache命令，对文件进行代码校验
- 如果需要对不同位置的文件做不同的校验命令的话，在lint-staged对象中新增字段即可，key值为对应的文件夹，value为需要执行命令的数组
- 接下我们就可以使用lint-staged+husky+eslint,来为我们的提交代码进行代码校验了
避坑点
- 当package.json文件与.git文件不在同一目录下时，运行
pnpm exec husky init与pnpm run prepare指令时会报.git 找不到的错
- 详情可以参考这个isssue
参考文章