2018-04-17配置eslint提升代码质量

npm安装eslint

目前ESLint的的稳定版本的是v4.19.1

$ npm install eslint -g
$ npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-html eslint-loader babel-eslint -D

配置.eslintrc文件

在项目根目录下创建.eslintrc文件，然后开始配置

{
  "extends": "standard",   //继承了eslint-config-standard的校验规则
  "plugins": [
    "html"  //这个插件的作用就是识别一个文件里面script标签里面的JS代码
  ],
  "parser": "babel-eslint" // 如果项目是基于webpack的，项目里的代码都是需要经过babel去处理的，引入之后，我们可以在vue-loader处理文件之前进行eslint检查，就不需要每次执行npm run lint去独立检查
}

配置package.json文件

在script的执行脚本中添加命令，通过$ npm run lint进行检查

"lint": "eslint --ext .js --ext .jsx --ext .vue src/" 
 //--ext后面需要写上指定检测文件的后缀，如.js、.jsx、 .vue等，紧接着后面要写上一个参数，这个参数就是我们要检测哪个目录下面的文件，一般项目文件都在src下面，所以在后面写上src/就好

通过lint自动修复问题

需要在package.json文件中新增一句，然后执行 npm run lint-fix，会自动修复很多空格，分号等问题

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

更改webpack配置文件

路径为/build/webpack.config.base.js, 更改位置 /module/rules/下添加一条验证规则

rules: [
  {
    test: /\.(vue|js|jsx)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    enforce: 'pre'  //预处理，在vue-loader处理之前进行eslint的校验，如果校验没有通过，就不需要vue-loader进行处理了
  },
  ......
]

配置之后就可以通过执行npm run dev 去校验文件了，如果文件有热更新，command+s也会触发保存校验

注意⚠️

有一种方法可以针对某个文件进行忽略检查，就是在报错的JS文件中第一行写上/* eslint-disable */，则eslint会自动忽略对该文件的校验

最后

参考链接： eslint提升代码质量