Eslint

最新推荐文章于 2024-09-05 19:20:05 发布

weixin_34068198

最新推荐文章于 2024-09-05 19:20:05 发布

阅读量106

点赞数

文章标签： json javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017016302

版权

官网

配置

有两种主要的方法来配置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)：规则。