简述
在多人开发的项目中时,每个人代码风格不一致。而且在开发的过程中,也会出一些小问题。对于以上的情况,需要 eslint
帮助我们避免以上的问题。
vue-cli 2.0 构建的项目配置 eslint,可以先读这篇文章,了解 eslint
的配置。但是上面的配置是基于 webpack
运行时编译的,用的是 eslint-loader
。这样开发代码的时候,每一次保存都会进行 eslint
的校验,这个是非常耗时的。
为了解决上面的问题,我们在每次代码 git
提交的时候,再运行 eslint
,不符合 eslint
规范的代码,不给提交。这样就能完美解决上面提到的问题。
husky 是什么?
husky
是可以通过 eslint
配置,防止不规范的代码提交到 git
服务的。
husky
中文文档, husky 能使用时基于 git 的钩子
用过 git
的小伙伴们都知道 git
有很多命令 commit
、push
、rebase
等等。那这些命令主要是在执行 .git
文件夹中的东西,那么 git
钩子目录就是在 .git
文件夹的 hooks
下,如下所示:
上面有
pre-commit
,是在 git commit
之前可以做一些事情(比如进行 eslint
校验)。
安装&配置
npm install --save-dev husky
elist 配置参考
vue-cli 2.0 构建的项目配置 eslint,去掉 webpack.config.js
中的 eslint-loader
配置
并在 package.json 中做如下配置:
"scripts": {
"lint": "eslint src --fix --ext .js,.vue"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint",
"pre-push": "npm run lint"
}
}
先执行 git add .
,后执行 git commit -m 'xxx'
的时候会先执行 npm run lint
,校验 eslint
的规则是否符合代码规范。符合规范,就进行 commit
提交。不符合要求,中断执行,不执行 commit
提交。
这样就满足了在每次提交代码的时候进行 eslint
规则校验,尽量能保证上线的代码没有问题。
如果这是一个新项目以上的就已经满足要求了,但是如果拿到的项目是一个老项目呢,别人开发了很久,这个时候加入再加入
eslint
规则,全局去检查,会发现一堆报错信息。这个就慌了。修改可能带来其他问题。
为了解决上面的问题,我们就需要引入 lint-staged
lint-staged
lint-staged
的作用是只对 git add
缓存区的代码进行 eslint
代码规范校验。这样就避免了全局校验的问题。你修改了上面代码,你就提交了什么代码,其他代码不做 eslint
校验。
安装&配置
npm install --save-dev lint-staged
在 package.json
中添加
"lint-staged": {
"src/**/*.{js,vue}": [
"npm run lint"
]
},
src/**/*.{js,vue}
根据自己的项目录去修改。
总结
以上配置已经满足项目需求了。其中 package.json
整体添加变更如下:
"scripts": {
"lint": "eslint src --fix --ext .js,.vue"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint",
"pre-push": "npm run lint"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"npm run lint"
]
},
需要安装的依赖包如下:
"husky": "^4.3.0",
"eslint": "^7.10.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^10.4.0",