标签ESLint

ESLint
规则的细节请到ESLint官方网站查看 http://eslint.org/docs/rules/

配置esLint
eslint配置方式主要有两种：

注释配置：使用js注释来直接嵌入ESlint配置信息到一个文件里
配置文件：使用一个js，JSON或者YAML文件来给整个目录和它的子目录指定配置信息。这些配置可以写成一个文件名.eslintrc.*的文件或者package.json文件里的eslintConfig项里
这两种方式ESlint都会自动寻找然后读取，也可以直接在命令行内指定一个配置文件。
一般需要我们去配置项包括：

环境：你的脚本会在哪种环境下运行。每个环境带来了一组特定的预定义的全局变量。
全局变量：脚本运行期间会访问额外的全局变量。
规则：使用那些规则，并且规则的等级是多少。
vue-cli脚手架安装完成后，主要有几个地方配置了eslint。

1，项目创建后项目中就会出现.eslintignore 和.eslintrc.js两个文件
.eslintignore类似Git的.gitignore用来配置不需要Eslint检查的文件
.eslintrc.js主要用来配置具体规则

.eslintignore文件

添加不启动静态检查的文件

build/*.js // 忽略build文件夹下所有的脚本文件
config/*.js
.eslintrc.js文件

// https://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parser: 'babel-eslint', // 解析器为babel-eslint,可在package.json文件中配置
  parserOptions: {
    sourceType: 'module'
  },
  env: { //环境配置为浏览器
    browser: true,
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: 'standard', //文件配置继承standard规则，具体访问连接
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': { // 添加自定义规则
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}
说明： 在rules中每个配置项后面的第一个值为eslint规则的错误等级

"off" 或 0 （关闭这条规则）
"warn" 或 1 （违反规则会警告，不影响项目运行）
"error" 或 2 （违反规则会报错，终止项目运行）
2 在package.json文件中配置文件

"script" : {
    "lint": "eslint --ext .js, .vue src"
}
"devDenpendencies" : {
    "babel-eslint": "^7.1.1",
    // 更多eslint文件
    ...
}
#### 3 在webpack配置文件中 ####

webpack.base.conf.js

  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      }
    ]
  }
有时候代码里有些特殊情况需要我们在某一行或者某几行关闭ESLint检测，可以使用注释：

1，注释关闭所有规则

/* eslint-disable */
alert('foo');
/* eslint-enable */
2，关闭某一行的所有规则

alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
3，在某一行关闭指定的规则

alert('foo'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert('foo');