什么是 Lint?
Lint 是对代码做静态分析,并试图找出潜在问题的工具,实战中我们也用 Lint 来指使用工具的过程。
为什么要 Lint?
使用Lint可以带来的好处:
- 减少潜在的bug
- 提升开发效率
- 提升代码的可读性
要怎么做 lint?
市面上lint工具有很多,经过多次对比使用,最终我们团队决定选用 husky + lint-staged 这套完美搭配。
staged是git里面的一个概念,
指的是代码的提交区:使用git add . && git commit -m ${msg}提交后,
接下来所有修改过的代码都会进入代码提交区,
和staged相对的一个概念是working tree clean。
在本地提交代码前进行校验,如果不通过lint则需要重新commit,
lint-staged工具会帮助我们只校验改动的代码,
对于那些有历史包袱的大项目,可以忽略未修改的历史文件。
如何配置?
安装
# 安装 husky
$ npm install husky -D
# 安装 lint-staged
$ npm install lint-staged -D
配置
// package.json
"scripts": {
"prettier": "prettier --write ./src/**/*.js",
"lint-staged": "lint-staged",
},
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*.js": [
"npm run prettier"
]
},
如上所示,首先在 package.json中配置了一个husky对象,
增加了pre-commit的hook,指定的动作是运行npm run lint-staged命令。
通过npm scripts中的lint-staged命令则可以触发另一个配置在package.json中对象lint-staged里的动作,
比如这里是进行代码美化。
增加 commit 内容 lint
如果有一个项目,从始至终都是你一个人在维护,那么你想怎么写都可以,没有人会干预你。
但是如果是一个多人维护的项目,大家都有各自的想法,
连「每行代码结尾是不是要加分号」这种的很难统一的行为,
更何况是提交代码呢?
所以我们需要一个可以校验提交信息格式的工具:commitlint
安装
# 安装依赖
npm i husky lint-staged prettier @commitlint/cli @commitlint/config-conventional -D
配置
package.json中的相关配置:
// package.json
"husky": {
"hooks": {
"pre-commit": "npm run lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*.js": [
"npm run prettier"
]
},
其中"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"这行表示当执行git commit时会使用 commitlint进行格式校验,
格式来自于配置文件:commitlint.config.js:
// commitlint.config.js
module.exports = {
extends: ["@commitlint/config-conventional"],
};
参考官方文档:
执行成功如图所示