现有vue项目，引入eslint

背景：
项目已经进行了很久，没有统一的代码规范，就想引入eslint，规范一下，也可能是强迫症犯了闲的。

正文：
 

// 1.安装eslint
$ cnpm install -g eslint
// 2.用别人的轮子,eslint三个标准之一的eslint-config-standard
$ cnpm install 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文件，然后在里面敲入以下代码：

{
  "extends": ["standard", "plugin:vue/essential"],
  "plugins": [
    "html"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {
    "no-tabs": 0
  }
}

执行完以上步骤后，我们跳转到package.json文件里面的scripts里面新增一条命令：

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

执行完以上步骤之后，在build目录下找到webpack.config.base.js，然后在module下面的rules里面添加一个对象：

rules: [
  {
    test: /\.(vue|js|jsx)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    enforce: 'pre'
  },
  ......
]

现在我们就可以到terminal里面输入$ cnpm run lint，来检验项目里的代码是否符合ESLint的规则,这个时候就会有很多的错误和警告，别担心，如果现在不想改，也可以让eslint忽略他们，再未来的代码拥有eslint，或者留着以后慢慢优化。在根目录新建一个文件.eslintignore里面写上需要忽略的文件夹或者文件，如下（这个不能照抄，按照自己的项目目录来添加）：

build/
config/
static/
src/api/
src/assets/
src/common/
src/components
src/styles/
src/vuex/
src/views/achievement
src/views/activity
src/views/commission
src/views/components
src/views/contract
src/views/customerManagement
src/views/message
src/views/orderSystem
src/views/Home.vue
src/routes.js
src/main.js

这个时候你可能只检测了几个文件，还是报错，想改校验规则，或者让他的报错优先级降低，你可以在.eslintrc的router里面改(上面的文件里面已经给你添加了一条)。
eslint的router规则参考：https://www.cnblogs.com/-walker/p/8143715.html
本篇文章参考：https://www.imooc.com/article/32222（算是把文章精简了和拓展了）
到这其实照做，可能还有其他的坑，那就自己找找方法吧。
在编辑器中自动提示eslint的错误，我用的是webstorm，配置方法参考：https://blog.csdn.net/qq_29329037/article/details/80100450
只是把文中的“2.安装好之后，找到settings中ESLint，选中，就会进入配置页面，勾选Enable->第一项配置自己安装nodejs目录下node.exe,第二项配置当前项目中node_modules/.bin目录下的eslint.cmd，第三项改成.eslintrc”红色字体部分更换了。