舒小琦的Blog 首页归档标签分类组件关于
vue项目配置eslint+husky+lint-staged
|工程配置

最近使用了vue-cli3构建开发一个新的项目， 发现在开发的过程中有很多人会不经意把console.log等提交上去了。于是觉得有必要把eslint加上，因为在多人开发中，每个人的代码风格可能是不一样的。大团队协作时，良好的代码规范显得格外重要，因为这是保障一个团队代码风格相同、避免低级bug的途径之一。为了解决这样的问题！ 我们在每次提交的时候都可以进行一次eslint检查。不符合eslint规范的不给提交。这样就能解决问题了。

创建项目

下面讲解的项目范例会使用vue-cli来创建。

具体如何创建一个项目可以看 官方的文档

安装全局的vue-cli

1
npm install -g @vue/cli

创建项目

1
vue create eslint-example

选择配置

弹出的配置中， 我们选择如下的配置：

当然配置可以根据自己的需要要选择， 我这里只是举个例子

配置ESlint

ESlint 是什么？ESlint 是一个语法规则和代码风格的检查工具。关于一些配置项这里不做过多的讲解。

学习的话可以直接去官网学习：ESlint英文官网，ESlint 中文官网

Eslint如何去使用呢？ 前提肯定是先安装（至于是本地安装还是全局安装，看自己项目的需要）：

1
npm install eslint --save

本文在创建的时候选择的配置已经把eslint安装上，所以在该项目中就不需要再安装一次了。

小tips：但是这里创建项目时候选择的eslint版本是有问题， 这个问题下面会暴露， 这里可以先跳过

创建.eslintrc文件

手动在项目的根目录添加.eslintrc文件。

安装完之后，不要着急，我们不使用官方提供的eslint --init来生成配置文件而是手动添加。为什么呢？ 因为这样我们需要手动配置很多个的规则。

那如果不这样？那有没有更好的简便的方法呢？那肯定是有的。网上有一个叫 eslint-config-standard的插件，它是标准的ESlint规则， 我们在项目中继承这个标准就可以了。

安装eslint-config-standard

1
npm install eslint-config-standard --save

如eslint-config-standard官网所说：如果我们是需要手动加一些配置的,需要手动安装如下的npm包

所以我们需要安装如下：

1
npm install --save-dev eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node --save

因为eslint-config-standard校验规则的时候需要依赖这些plugins去验证。

然后我们在.eslintrc文件添加

1
2
3
4
5
{
  "extends": [
    "standard"
  ]
}

这时候校验肯定是校验不了， 因为少安装了一些插件。因为eslint-config-standard校验规则的时候需要依赖这些plugins去验证。

1
npm install --save-dev eslint-config-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node --save

这时候是不是就可以验证了了么？我们执行运行项目看看：npn run serve: 发现抛出错误了。

这是因为eslint版本过低。eslint-config-standard插件必须使用7.11.0版本以上的eslint。具体原因可看：https://github.com/standard/eslint-config-standard/issues/176

注意：这也就是我们上面说的问题；使用eslint-config-standard 只要需要ESlint：7.11.0版本以上，不然报错，无法校验。

重新安装eslint:

1
npm i eslint@7.11.0 --save

这时候运行我们的项目就不会报上面的错了。可以进行代码风格校验了。

安装eslint-plugin-html

因为vue的项目，.vue文件写的是类似像html这样的格式，它不是标准的Javascript文件。ESlint是无法识别.vue文件的js代码的。所以需要安装另外一个插件 eslint-plugin-html。这个插件的作用是识别一个文件里面的script标签的js代码。

.vue文件的js代码就是写在script标签中的。

安装

1
npm i eslint-plugin-html --save

配置

在.eslintrc添加：

1
2
3
4
5
6
{
  "extends": [
    "standard"
  ],
  "plugins": ["html"]
}

package.json 添加命令

首先先去除package.json里面eslint的配置字段：eslintConfig

上面的步骤完成之后，在项目的packge.json的script字段修改lint命令

1
2
"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"

–ext后面加上我们需要检测文件的后缀，如.js、.jsx、 .vue等，紧接加上检测哪个目录下面的文件的目录，如： 我们要检查src目录下面的文件，就直接写src。

到目前为止，我们可以使用npm run lint来校验了。当然我们可以使用npm run lint-fix来自动修复。

安装 eslint-plugin-vue

上面的步骤配置完成之后， 我们试着npm run lint。控制台是能够显示出来那些是有规则问题的，如：

我们可以看到，那些代码是有规则问题都被标出来了。

但是我们进到相应的文件去看，相应有问题的地方却没有被标红（vscode编辑器）这是为什么呢？(之前的项目是可以被标识出来的)

这是因为：我们使用的是vue-cli3构建的项目，我们使用之前的方案去实现标识是无法识别的。

想要vscode编辑器对.vue文件的eslint检测时有错误标红出来， 则需要eslint-plugin-vue 插件。

安装

1
npm install --save-dev eslint-plugin-vue

添加plugin说明

.eslintrc文添加plugin说明

.eslintrc:

1
2
3
4
5
6
7
8
{
	// ...其他配置项
  "plugins": [
  	// ...其他plugins
  	"vue"
  ]
  // ...其他配置项
}

添加extend说明

.eslintrc文添加extend说明

.eslintrc:

1
2
3
4
5
6
7
8
{  
	// ...其他配置项
	extends: [
	  // ... 其他的规则
    'plugin:vue/base'
  ]
  // ...其他配置项
}

这里使用的是base里面的规则。更多的配置可看 官方文档

解析器配置

.eslintrc配置解析器

.eslintrc:

1
2
3
4
5
6
7
8
{
	// ...其他配置项
	parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  }
 // ...其他配置项
}

完整的.eslintrc:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "extends": [
    "standard",
    "plugin:vue/base"
    
  ],
  "plugins": ["html", "vue"]
}

那么现在有问题的代码就会标红出来了，如：

到目前为止， eslint相关的配置就完成了。

husy

有这样的情况：我们试着提交一次有eslint错误的代码:

我们发现是可以提交的。并且尝试push到远端的时候，也是可以的。但其实我们是希望在有eslint错误的时候，不能做提交和push这类操作的， 防止有问题的代码托送到远端。那么husky就可以帮助我们。

husky官方文档

husky 是一个npm安装包，安装了之后可以很方便的配置git hook脚本， 以防止不规范代码被commit、push、merge等。

安装

由于目前husky已经升级到了 6 版本， 变化还是很大的，网上的很多文章讲解的都是4版本的， 不是很对了。所以我们直接看husky官方文档的安装方式及其使用方式

1
npx husky-init && npm install

我们会发现init生成了一个默认的pre-commit钩子：

我们把该配置的npm test去掉。

配置钩子

修改pre-commit钩子：

1
npx husky add .husky/pre-commit 'npm run lint'

配置pre-push钩子：

1
npx husky add .husky/pre-push 'npm run lint'

配置pre-merge钩子：

1
npx husky add .husky/pre-merge 'npm run lint'

现在我们试着测试，看是否生效:

我们尝试提交了代码不符合规范的代码，确实被阻止了， 生效。

lint-staged

我们希望每次commit ,push和merge等这样的操作的时候，只希望校验自己修改的文件代码规范，而不是全局的检验。 这就需要 lint-staged了。

lint-staged的作用是只对git add缓存区的代码进行eslint代码规范检验。这样就能避免全局校验的问题。 符合了我们修改了什么文件，就校验什么文件。其他的的代码不做eslint校验。

安装

1
npm install --save-dev lint-staged

配置

在 package.json中添加：

1
2
3
4
5
"lint-staged": {
   "src/**/*.{js,vue}": [
     "npm run lint"
   ]
},

src/**/*.{js,vue} 是需要校验的目录， 可以根据目录去修改。

总结

到目前为止，配置就做完了。最后觉得在做一个多人开发的项目的时候， 前期一些代码规范的配置觉得是很有必要的。

本文中的例子github链接：shuliqi/eslint-husky-lint-staged-example

文章作者: 舒小琦
文章链接: https://shuliqi.github.io/2021/04/03/vue项目中eslint-husky-lint-staged配合规范开发提交/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 舒小琦的Blog！
工程配置