vue项目添加eslint+husky+lint-staged

简述

在多人开发的项目中时，每个人代码风格不一致。而且在开发的过程中，也会出一些小问题。对于以上的情况，需要 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",
复制代码