vue项目整合Eslint和stylelint规范代码

前言
最近在搭建项目框架，想着上一个项目代码风格各异，就想着在新项目中引入Eslint来规范团队成员代码风格，保持统一，也方便大家维护代码，减少不必要的错误。前端应用愈加复杂，代码规范问题必须通过强制的方式保持统一。以下是团队逐渐摸索出的一些配置，各取所需。

Eslint配置
在用vue-cli3搭建项目的过程中就会问你是否需要Eslint，选择就好来。如果没有选择后期又想加入eslint，可以手动安装Eslint的相关依赖。

安装
npm install eslint eslint-plugin-vue --save-dev
复制代码
需要注意：Node.js (>=6.14), npm version 3+。

创建Eslint配置文件
在项目根目录下新建一个文件，名.eslintrc.js。下面是个人的一些配置，可以自行参考。

module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
extends: [“eslint:recommended”, “plugin:vue/essential”, “@vue/prettier”],
rules: {
“generator-star-spacing”: “off”,
“no-console”: process.env.NODE_ENV === “production” ? “warn” : “off”,
“no-debugger”: process.env.NODE_ENV === “production” ? “warn” : “off”,
“vue/no-parsing-error”: [
2,
{
“unexpected-solidus-in-tag”: false
}
]
},
parserOptions: {
parser: “babel-eslint”,
ecmaVersion: 7,
sourceType: “module”,
ecmaFeatures: {
// 添加ES特性支持，使之能够识别ES6语法
jsx: true
}
}
};

复制代码
忽略Eslint校验
如果一些文件不需要Eslint的校验，可以配置一个.eslintignore，里面写上需要排除的文件。

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
复制代码
stylelint配置
stylelint可以帮助我们规范化css的书写，风格统一，减少错误。

安装依赖
npm i -D stylelint stylelint-config-standard stylelint-webpack-plugin
复制代码
配置
在项目根目录下新建配置文件.stylelintrc.js，相关配置如下：

module.exports = {
extends: “stylelint-config-standard”,
rules: {
“color-no-invalid-hex”: true,
“rule-empty-line-before”: null,
“color-hex-length”: “long”,
“color-hex-case”: “lower”,
“unit-whitelist”: [“em”, “rem”, “%”, “s”, “px”],
“declaration-colon-newline-after”: null
}
};

复制代码
代码美化prettier配置
虽然借助 Eslint 来提高代码质量，但是却无法保证代码风格统一。一个统一的代码风格对于团队来说是很有价值的，所以为了达到目的，我们使用了 Prettier在保存和提交代码的时候，将代码修改成统一的风格。

安装依赖
npm i -D prettier @vue/eslint-config-prettier
复制代码
配置
相关配置写在.eslintrc.js中

extends: [“eslint:recommended”, “plugin:vue/essential”, “@vue/prettier”]
复制代码
我使用的是vscode编辑器，同时配置了vscode。

{
“eslint.autoFixOnSave”: true,
“eslint.validate”: [
“javascript”,
{
“language”: “vue”,
“autoFix”: true
},
“html”,
“vue”
],
“editor.wordWrap”: “wordWrapColumn”,
“editor.formatOnSave”: true,
“vetur.validation.template”: false,
“cSpell.ignoreWords”: [
“menu”,
“mixins”
]
}
复制代码
推荐使用vscode的同学安装eslint和Prettier - Code formatter这两个插件，配合上面的配置，达到保存的时候自动格式化和校验的目的。

提交时校验
安装两个工具
husky：一个方便用来处理 pre-commit 、 pre-push 等 githooks 的工具

lint-staged：对 git 暂存区的代码，运行 linters 的工具

npm i lint-staged husky -D
复制代码
package.json增加配置
…
“husky”: {
“hooks”: {
“pre-commit”: “lint-staged”
}
},
“lint-staged”: {
“src/**/*.{js,jsx,vue}”: [
“prettier --tab-width 2 --write”,
“vue-cli-service lint --fix”,
“git add”
]
}
…
复制代码
这样就可以实现在提交的时候校验，保证错误的代码无法提交。

到目前为止，项目中就整合进了Eslint校验，prettier美化代码，提交hooks代码检查。