用处
lint-staged 借助 git hook 实现在 git commit 前自动进行代码 prettier + eslint 检测。如果存在 eslint error 则会 commit 失败。
原理
lint-staged 基于 husky,husky能够让开发者更加便捷的操作 git hook.
借助 husky 提供的 pre-commit hook,在每次 commit 前可以触发特定的操作,比如执行 lint-staged 对提交的 code 进行 prettier 和 eslint 检测。
husky: You can use it to lint your commit messages, run tests, lint code, etc... when you commit or push. Husky supports all Git hooks.
安装使用
安装
npx mrm lint-staged
使用 在执行了上面的命令后,package.json 中会添加相关的依赖和配置项,如下
{
"name": "My project",
"version": "0.1.0",
"scripts": {
"my-custom-script": "linter --arg1 --arg2"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*": ["eslint --cache --fix"]
}
}
添加 prettier 代码美化工具
- npm 安装:
npm i prettier -D
- 修改 package.json 中的配置项:
{
"name": "My project",
"version": "0.1.0",
"scripts": {
"my-custom-script": "linter --arg1 --arg2"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
+ "**/*": ["prettier --write --single-quote --ignore-unknown", "eslint --cache --fix"]
}
}
--single-quote 为 prettier 的配置项:默认使用单引号,自定义配置参考此处Prettier Options
指定 lint-staged 的生效目录
- 修改 package.json 中的配置项:
{
"name": "My project",
"version": "0.1.0",
"scripts": {
"my-custom-script": "linter --arg1 --arg2"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
+ "src/**/*.{js,vue}": [
"prettier --write --single-quote --ignore-unknown",
"eslint --cache --fix"
]
}
}
说明:
src/**/*.{js,vue}
:匹配 src 目录下所有的 js 和 vue 文件- 匹配规则为 glob-pattern:
- ** 表示递归匹配目录
/*.{js,vue}
会展开为/*.js /*.vue
- 逆向匹配:
!(目录名1|目录名2)/**/*.{js,vue}
匹配除了目录名1和目录名2外的所有目录下的js和vue文件
- glob-pattern 文章参考:
注意
如果项目中配置了 eslint-loader 进行 eslint-on-save, 会和 lint-staged 冲突,需要关闭。
因为 eslint-loader 是保存的时候进行检测,如果项目 lint 没通过,无法正常开发,此时开启 lint-staged 没有什么意义。
所以二选一, 保存时候检测 OR commit 前自动格式化+检测