webpack手动搭建vue项目（三）—— 配置eslint

1.安装eslint

> npm install eslint --save-dev

> eslint --init

? How would you like to configure ESLint?

> use a pooular style guide

? Which style guide do you want to follow?

>Standard

? What format do you want your config file to be in?

>javascript

>npm install babel-eslint eslint-loader eslint-plugin-html eslint-plugin-vue eslint-friendly-formatter --save-dev

2.修改.eslintrc.js文件

参照vue-cli2模板，修改成如下

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {   // 这一部分根据个人喜好配置
    // allow async-await
    'generator-star-spacing': 'off',
    "no-tabs":"off",
    "quotes": [0, "single"],
	"new-cap": 0,
	"handle-callback-err": 0,
	'vue/no-side-effects-in-computed-properties': 'off',
	'no-undef':0,
	'no-unused-expressions': process.env.NODE_ENV === 'test' ? 'error' : 'off',
    "indent": [2, 4],//缩进风格
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

3.修改webpack.base.js

在rules添加如下规则

{
                test: /^((?!bmap).)*\.(js|vue)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                include: [path.resolve(__dirname, 'src')],
                options: {
                    formatter: require('eslint-friendly-formatter')
                }
            },

4.配置.eslintignore文件

/build/
/config/
/dist/
/*.js

5.添加package.json脚本

"lint": "eslint --ext .js,.vue src"

6.总结

注意：此处各个"babel-eslint做好和上文中的babel-loader保持版本一致为7.1.1版本。

附上我所用版本，和vue-cli2一样的，如下:

    "babel-eslint": "^7.1.1",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.5.0",
    "extract-text-webpack-plugin": "^3.0.2",