vue-cli 的 EsLint 配置

以vue-cli脚手架初始化的项目为例(脚手架版本：v.2.6.x)

1、首先需要下载eslint所需依赖：

npm install babel-eslint eslint eslint-loader eslint-plugin-vue -D

2、下载完毕后初始化eslint配置:

执行 ./node_modules/eslint/.bin/eslint

执行完毕后，会发现多了一个.eslintrc.js文件(提示选择的配置项，一路next即可)

3、添加webpack配置

我们需要在webpack.base.conf.js 加入eslint-loader：具体如下

	{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          // formatter: require('eslint-friendly-formatter'),
          emitWarning: false
        }
      }

其中options.emitWarning为false的情况下，出现不符合规范的错误将会在页面中以遮罩层的方式显示,如果设置为true，则只会在控制台显示（下图显示的为false的情况）

4、修改eslint配置文件

接下来主要说一下常用配置项的作用

parserOptions的sourceType可设置为script或module，这里我们使用的是模块化开发，所以设置为module
env的主要作用是指定代码的运行环境，这里指定了浏览器环境
plugin主要是eslint的插件，插件名称可以省略eslint-plugin-，比如这个vue，我们上边第一步下载的实际是eslint-plugin-vue(注意：这里对vue也增加了使用规范，所以extends中的配置需要加上，不然会报错)
接下来最主要的是rule里的配置：

off或0–关闭规则
warn或1–开启规则，警告级别(不会导致程序退出)
error或2–开启规则，错误级别(当被触发的时候，程序会退出)
最后附上一个整理过后的常用规则配置：

rules: {
      // allow async-await
      'generator-star-spacing': 0,
      // allow debugger during development
      'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
      'no-dupe-keys': 2, // 对象key重复
      //  "quotes": ["error", "double"],
      'comma-dangle': 2, //定义数组或对象最后多余的逗号
      'no-unused-vars': 1, //变量定义后未使用
      'accessor-pairs': 2, //getter和setter要同时出现
      'use-isnan': 2, //要求检查NaN的时候使用isNaN()
      'no-sparse-arrays': 2, //数组中不允许出现空位置
      'no-native-reassign': 2, //禁止覆盖原生对象
      'keyword-spacing': 1, //关键字后边加空格
      'space-before-function-paren': 1,//函数声明时括号与函数名间加空格
      'eqeqeq': 2,//始终使用 === 替代 ==。obj == null 可以用来检查 null || undefined。
      'space-infix-ops': 1, //字符串拼接操作符 (Infix operators) 之间要留空格。
      'comma-spacing': 1, //逗号前边加空格
      'brace-style': 1, //else 关键字要与花括号保持在同一行。
      'operator-linebreak': 1, //保证三元运算符与他们负责的代码在一行
      'block-spacing': 1,//单行代码块两边加空格。
      'comma-style': 1, //始终将逗号置于行末
      'dot-location': 1, //点号操作符须与属性需在同一行
      'new-cap': 1, //构造函数要以大写字母开头。
      'no-dupe-args': 1, //不要定义冗余的函数参数
      'no-duplicate-imports': 1,//同一模块有多个导入时一次性写完
      'semi-spacing': 1, //遇到分号时空格要后留前不留
      
      'spaced-comment': 1, //注释首尾留空格 
  
      //vue
      'vue/no-dupe-keys': 2,
      // 禁止出现语法错误
      'vue/no-parsing-error': 2,
      // 禁止覆盖保留字
      // 'vue/no-reservered-keys': 2,
      // 组件的 data 属性的值必须是一个函数
      // @off 没必要限制
      'vue/no-shared-component-data': 2,
      // 可以让 <template> 使用 key 属性
      'vue/no-template-key': 'off',
      // render 函数必须有返回值
      'vue/require-render-return': 2,
      // prop 的默认值必须匹配它的类型
      'vue/require-valid-default-prop': 2,
      // 计算属性必须有返回值
      'vue/return-in-computed-property': 2,
      // template 的根节点必须合法
      'vue/valid-template-root': 2,
      // v-bind 指令必须合法
      'vue/valid-v-bind': 2,
      // v-cloak 指令必须合法
      'vue/valid-v-cloak': 2,
      // v-else-if 指令必须合法
      'vue/valid-v-else-if': 2,
      // v-else 指令必须合法
      'vue/valid-v-else': 2,
      // v-for 指令必须合法
      'vue/valid-v-for': 2,
      // v-html 指令必须合法
      'vue/valid-v-html': 2,
      // v-if 指令必须合法
      'vue/valid-v-if': 2,
      // v-model 指令必须合法
      'vue/valid-v-model': 2,
      // v-on 指令必须合法
      'vue/valid-v-on': 2,
      // v-once 指令必须合法
      'vue/valid-v-once': 2,
      // v-pre 指令必须合法
      'vue/valid-v-pre': 2,
      // v-show 指令必须合法
      'vue/valid-v-show': 2,
      // v-text 指令必须合法
      'vue/valid-v-text': 2,
  
      'vue/html-end-tags': 'off',
      // 计算属性禁止包含异步方法
      'vue/no-async-in-computed-properties': 2,
      // 禁止出现难以理解的 v-if 和 v-for
      'vue/no-confusing-v-for-v-if': 2,
      // 禁止出现重复的属性
      'vue/no-duplicate-attributes': 2,
      // 禁止在计算属性中对属性修改, 是具体情况而定，有时候可能会用到，列为warn；
      'vue/no-side-effects-in-computed-properties': 1,
      // 禁止在 <textarea> 中出现 {{message}}
      'vue/no-textarea-mustache': 2,
      // 组件的属性必须为一定的顺序
      'vue/order-in-components': [2, {
        "order": [
          "el",
          ["name", "parent"],
          "functional",
          "delimiters",
          ["components", "directives", "filters"],
          ["extends", "mixins"],
          ["model", "props", "propsData"],
          ["data", "computed"],
          ["watch", "LIFECYCLE_HOOKS"],
          "methods",
          ["template", "render", "renderError"]
        ]
      }],
      // <component> 必须有 v-bind:is
      'vue/require-component-is': 2,
      // prop 必须有类型限制
      'vue/require-prop-types': 2,
      // v-for 指令的元素必须有 v-bind:key
      'vue/require-v-for-key': 2,
      // @fixable 限制 v-bind 的风格, 统一简写形式
      'vue/v-bind-style': 2,
      // @fixable 限制 v-on 的风格，统一简写形式
      'vue/v-on-style': 2,
    }

以上规则设置为2(也就是error)且options.emitWarning为false的情况下，将会以图一的方式提示规范错误。