在vue2.x和webpack2.x中使用eslint

---

全局安装 eslint

npm install eslint -g

在项目根目录运行如下指令

eslint --init

依次选择[use a popular style guide]–[standard]–[json]

这时项目根目录会出现一个.eslint.json的文件夹，编辑里面的内容：

{
  "extends": "standard",
  "plugins": ["html"],
  "rules": {
    "space-before-function-paren": [1, "never"],
    "no-unneeded-ternary": 0,
    "semi": [2, "never"],
    "eol-last": 0,
    "quotes": [2, "single"],
    "no-underscore-dangle": [0],
    "linebreak-style": 0,
    "consistent-return": 1,
    "global-require": 0,
    "comma-dangle": 0
  }
}

其中里面的内容可以自己配置，详见eslint 中文和eslint 英文
安装几个 package

npm install babel-loader eslint-loader eslint-plugin-html --save-dev

其中eslint-plugin-html是支持 eslint 校验.vue文件的

在webpack.config.js文件中将 vue 的 loader 修改为如下：

{
  enforce: 'pre',
  test: /\.vue$/,
  loader: 'eslint-loader',
  exclude: /node_modules/
},
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader' // ?indentedSyntax
    }
  }
}

---

Tips: eslint 校验比较严格，对代码不规范的人来说可能是噩梦，但是我们还是>要忍受一下，将我们那些代码不规范的毛病去掉