说明

ESlint，ECMA Script代码检查工具，依照代码规范进行代码检测和修复

静态代码检查

静态代码检测是VScode开发工具端的代码检测，错误会在代码上显示。

安装步骤

1. VScode安装插件

进入“偏好(preferences)" -> "扩展(extensions)"，安装如下两个编辑器插件，使VScode支持ESlint代码检查。

• ESlint：ES检查插件
• Vetur：针对vue的开发插件

注意安装完后检查状态栏是否开启了Eslint

2. 安装项目依赖

可以将eslint安装到全局，也可以安装到项目本地。为了项目可以迁移，一般将eslint安装到本地。

npm install --save-dev eslint # eslint核心
npm install --save-dev eslint-plugin-vue # 针对vue的代码检查库
npm install --save-dev babel-eslint # babel eslint语法分析器

3. 添加ESlint配置文件

在根目录下新建文件.eslintrc.js, 写入验证规则及其他属性。

至此，完成上述步骤就可以用eslint了，打开一个不符合规范的vue文件可以看到error或warning。

附：.eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }],
    "vue/name-property-casing": ["error", "PascalCase"],
    'accessor-pairs': 2,
    'arrow-spacing': [2, {
      'before': true,
      'after': true
    }],
    "vue/no-v-html": 0, // temporarily close this
    'block-spacing': [2, 'always'],
    'brace-style': [2, '1tbs', {
      'allowSingleLine': true // default: false
    }],
    'camelcase': [0, {
      'properties': 'always'
    }],
    'comma-dangle': [2, 'never'],
    'comma-spacing': [2, {
      'before': false,
      'after': true
    }],
    'comma-style': [2, 'last'],
    'curly': [2, 'multi-line'], // 'all': 强制使用大括号
    'dot-location': [2, 'property'],
    'eqeqeq': ["error", "always", {"null": "ignore"}], // default: 'always'
    'generator-star-spacing': [2, {
      'before': true,
      'after': true
    }],
    'handle-callback-err': [2, '^(err|error)$'],
    'indent': [2, 2, {
      'SwitchCase': 1
    }],
    'key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true
    }],
    'keyword-spacing': [2, {
      'before': true,
      'after': true
    }],
    'new-cap': [2, {
      'newIsCap': true,
      'capIsNew': false
    }],
    'new-parens': 2,
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-console': 'off',
    'no-eval': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-parens': [2, 'functions'],
    'no-floating-decimal': 2,
    'no-implied-eval': 2,
    'no-lone-blocks': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
    'no-multiple-empty-lines': [2, {
      'max': 1
    }],
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-wrappers': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 2,
    'no-undef-init': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, {
      'defaultAssignment': false
    }],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-whitespace-before-property': 2,
    'one-var': [2, {
      'initialized': 'never'
    }],
    'operator-linebreak': [2, 'after', {
      'overrides': {
        '?': 'before',
        ':': 'before'
      }
    }],
    'padded-blocks': [2, 'never'],
    'quotes': [2, 'single', {
      'avoidEscape': true,
      'allowTemplateLiterals': true
    }],
    'semi': [2, 'never'],
    'semi-spacing': [2, {
      'before': false,
      'after': true
    }],
    'space-before-blocks': [2, 'always'],
    'space-before-function-paren': [2, 'never'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
    'space-unary-ops': [2, {
      'words': true,
      'nonwords': false
    }],
    'spaced-comment': [2, 'always', {
      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    }],
    'template-curly-spacing': [2, 'never'],
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    'yoda': [2, 'never'],
    'prefer-const': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'object-curly-spacing': [2, 'always', {
      objectsInObjects: false
    }],
    'array-bracket-spacing': [2, 'never']
  }
}

动态代码检查

动态代码检查是在webpack编译的过程中进行代码检查，错误会输出到控制台，并且影响编译。

eslint-loader

类似于vue-loader, url-loader这样的插件，eslint-loader是适用于webpack的一个插件，通过它可以在编译时动态检查代码

安装步骤

1. 安装依赖

除了安装静态代码检查的那些依赖之外，再安装以下依赖

npm install --save-dev eslint-loader # eslint核心
npm install --save-dev eslint-friendly-formatter # eslint错误报告输出格式化

2. 添加规则到rules

webpack.base.conf.js

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
    module: {
        rules:[
            {
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              enforce: 'pre',
              include: [resolve('src'), resolve('test')], // 检查src, test文件夹
              options: {
                formatter: require('eslint-friendly-formatter')
              }
            }
            // 其他rule
        ]
    }
}

然后我们就可以使用命令 $ npm run dev，在开发环境进行ESLint错误检测。

自动修复

命令修复

在package.json的scripts增加如下命令：

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

执行$ npm run lint-fix检查并修复

* 解释

• src ：要验证的目标文件夹
• --fix：自动修复命令
• --ext：指定检测文件的后缀

保存时自动修复

静态保存修复（VScode编辑器）

打开VScode的settings.json文件，加上如下设置：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

编辑文件后保存文件，就会自动修复eslint的错误。

动态保存修复（Webpack devServer）

在webpack的配置中，找到eslint-loader的配置项，加上fix: true

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    fix: true, // 保存时自动修复
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

启动了webpack devServer的情况下，保存会自动修复eslint错误

ESlint开启/关闭

VScode端开启/关闭

• Ctrl+Shift+P打开命令面板，输入eslint, 选择Enable Eslint/Disable Eslint开启或关闭
• 进入设置，输入eslint，找到ESlint: Enable, 勾选或取消勾选Controls whether eslint is enabled for JavaScript files or not

Webpack开启/关闭

可以在环境配置文件中配置一个开关变量，控制是否要加入eslint-loader

/config/index.js

module.exports = {
    //...其他配置
    dev: {
        useEslint: true
    }
    //...其他配置
}

webpack.base.conf.js

const config = require('../config')

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
    //...其他配置
    module: {
        rules: [
            ...(config.dev.useEslint ? [createLintingRule()] : [])
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
             },
    		//...其他rule
        ]
    }
}

ESlint配置项

module.exports = {
    root: true,    
    parserOptions: {
        sourceType: 'module'
    },
    env: {
        browser: true,
    },
    extends: ['plugin:vue/recommended', 'eslint:recommended'],
    rules: {
        "indent": ["error", 2],
        "quotes": ["error", "double"],
        "semi": ["error", "never"],
        "no-console": "error",
        "arrow-parens": 0,
        'camelcase': [0, {
            'properties': 'always'
        }],
    }
}

• root 限定配置文件的使用范围
• parser 指定eslint的解析器
• parserOptions 设置解析器选项
• extends 指定eslint规范
• plugins 引用第三方的插件
• env 指定代码运行的宿主环境
• rules 启用额外的规则或覆盖默认的规则
• globals 声明在代码中的自定义全局变量

限定使用范围 (root: true)

如果我们想要在不同的目录中使用不同的 .eslintrc, 我们就需要在该目录中添加如下的配置项：

{
    "root": true
}

如果我们不设置的话，它将会继续查找，知道更目录，如果更目录有配置文件它将会使用根目录的，这样会导致当前配置目录配置无法起作用的问题。

parser（指定解析器）

babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。

env（环境）

在 .eslintrc.js 中添加如下代码：

"env": {
    "browser": true, //
    "node": true //
}

指定了环境，你就可以放心的使用它们的全局变量和属性。

global

指定全局变量。

在 .eslintrc.js 中添加如下代码：

"globals": {
    "var1": true,
    "var2": false 
}

规则

在.eslintrc.js 文件中添加 rules, 代码如下：

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

"semi" 和 "quotes" 是 ESLint 中 规则 的名称。第一个值是错误级别，可以使下面的值之一：

• "off" or 0 - 关闭规则
• "warn" or 1 - 将规则视为一个警告（不会影响退出码）
• "error" or 2 - 将规则视为一个错误 (退出码为1)

extends

我们可以使用eslint官方推荐的，也可以使用一些大公司提供的的，如：aribnb, google, standard。

官方推荐

只需在 .eslintrc.js 中添加如下代码：

extends: 'eslint:recommended',
extends: 'eslint:all',

第三方分享

使用第三方分享的，我们一般需要安装相关的插件代码如下：

npm install --save-dev eslint-config-airbnb // bnb
npm install --save-dev eslint-config-standard // standard

在 .eslintrc.js 中添加如下代码：

extends: 'eslint:google',
// or
extends: 'eslint:standard',