1

官网
深入理解 ESlint

配置

有两种主要的方法来配置ESLint:
1、配置注释 - 使用JavaScript注释将配置信息直接嵌入到文件中。
2、配置文件 - 使用下面任一的文件来为全部的目录和它的子目录指定配置信息。

A、javascript:使用.eslintrc.js文件并导出一个包含配置的对象。 
B、YAML:.eslintrc.yaml或者.eslintrc. 
C、yml JSON:.eslintrc.json,并且此文件允许使用JS形式的注释 
D、废弃的用法:.eslintrc,此文件可以是JSON或者YAML 
E、package.json:在package.json文件中创建eslintConfig属性,所有的配置包含在此属性中。  
这些文件的优先级则是按照以上出现的顺序(.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json)。

 从最高优先级到最低优先级的完整配置层次如下: 
1、内联配置

/*eslint-disable*/
 /*eslint-enable*/
/*global*/
/*eslint*/
/*eslint-env*/ 

2、命令行选项:

--global
--rule
--env
-c, --config 

3、项目级配置:
.eslintrc.*或者将package.json文件放入与linted文件相同的目录中继续搜索.eslintrc,并package.json在祖先目录中的文件(父具有最高的优先级,然后祖父母等),直至并包括根目录或直到一个配置"root": true中找到。 

{
    "root": true
}

在没有从(1)到(3)的任何配置的情况下,回到个人的默认配置~/.eslintrc。 

*文件或文件中的eslintConfig字段的形式package.json,ESLint将自动查找和读取,也可以在命令行上指定配置文件。如果您的主目录中(通常~/)有配置文件,则ESLint 仅在ESLint找不到任何其他配置文件时才使用它。
如果在同一个目录中找到.eslintrc和package.json找到一个文件,.eslintrc将会优先考虑,并且package.json不会使用文件。 

初始化

如果你的项目还没有配置文件(.eslintrc)的话,可以通过指定--init参数来生成一个新的配置文件:

eslint --init

运行eslint --init后,会在当前目录下生成一个.eslintrc文件,你可以在这个文件中配置一些规则。

WebStorm

Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> Eslint -> Enable (勾选) -> Apply -> OK

命令行

eslint -h 

自动修复报错

在package.json文件里面的scripts里面新增一条命令:

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

使用共享的配置文件

ESLint支持将共享设置添加到配置文件中。我们大多时候,个人或者团队有好几个项目,而每个项目可能使用规则不同,或者需要配置不同的规则,如果都写到一个配置或者每次都改配置文件,管理起来会很麻烦。
新建一个文件比如eslint-config-public.js,在文件内容添加一两个规则。然后将原的.eslintrc.js文件改成这样:

extends: './eslint-config-public.js',

(extends)该属性可以是eslint命令,也可以是继承文件的路径。
1、eslint:all: 表示引入当前版本eslint的所有核心规则。
2、eslint:recommended: 表示引入eslint的核心功能,并且报告一些常见的共同错误。 如果值为绝对或相对路径则相当于导入路径对应的规则配置。

"extends": recommended,

忽略文件

在我们的工程目录中新建一个文件,命名为“.eslintignore”,Eslint会自动识别这个文件。这个配置文件里面,每一行都是一个glob模式语句,

node_modules/* 
**/vendor/*.j
除了.eslintignore文件中的任何模式之外,ESLint始终忽略/node_modules/和/bower_components/  

.eslintrc.js

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: '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
  }
}

解析器(parser):使用了babel-eslint。
环境配置(env):在浏览器中使用eslint。
继承(extends):该配置文件继承了standard规则。
规则(rules):规则。

规则错误等级

规则的错误等级有三种:

  • "off" 或者 0:关闭规则
  •  "warn" 或者 1:打开规则,并且作为一个警告(不影响exit cod。
  •  "error" 或者 2:打开规则,并且作为一个错误(exit code将会是1)

zhouzhou
1.5k 声望76 粉丝

web前端


引用和评论

0 条评论