使用lint-staged做提交前代码检查

使用 lint-staged 做提交前代码检查

先来聊一下 lint-staged

lint-staged 是一个检查工具,官方自我的介绍是不让屎溜进你的代码

那么显而易见,这是一个比较严格的 lint 工具。他的好处是:

  • 提高可读性
  • 更好的维护代码
  • 减少 bug

发现这个东西是在 ant-design-pro 里发现的,确实很适合开源项目使用,防止其他提交 PR 的朋友代码太不规范

试想一下如果没有 lint 工具,你的工作流可能是这样:

  1. 本地代码提交
  2. 发现问题代码跑不起来
  3. 修改问题
  4. 重新提交代码
  5. 让别人试试是否修复

整个过程是痛苦的,在我们提倡高内聚低耦合的同时,还是希望自己的工作不会因为别人的提交而受到干扰。

那么 lint-staged 就是个不错的选择

lint-staged 最好的伙伴是 husky
因为 husky 是做 githooks 的,可以在 git 的各种钩子里面做检查

yarn add –dev husky
yarn add –dev lint-staged

package 中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"scripts": {
"lint-staged": "lint-staged",
},
"lint-staged": {
"src/**/*.js": "eslint"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged"
}
}
}

这样就打造了一个较为严禁的工作流,每次 commit 之前都会检查代码

因为日常工作中,有可能部分开发是不配置本地的 lint 的,造成问题会影响其他人的时间,就导致需要人为去告知他开启

那么如果有了这样一个工作流,他代码都提交不过,自然知道问题在哪,而不会浪费其他人的时间。

如果内容对您有帮助,不妨请作者喝杯咖啡