ESLint

Kinsley
572 阅读27分钟

ESLint开源中文文档网

/**
 * 参考文档
 * 【eslint英文文档】https://eslint.org/docs/user-guide/configuring
 * 【eslint中文文档】http://eslint.cn/docs/rules/
 */
 
/**
 * eslint有三种使用方式
 * 【1】js代码中通过注释的方式使用
 * 【2】通过webpack的eslintConfig字段设置，eslint会自动搜索项目的package.json文件中的配置
 * 【3】通过配置文件的方式使用，配置文件有多种文件方式，如JavaScript、JSON 或者 YAML等
 */
 
/**
 * 文件忽略
 * 【】让eslint跳过特定文件的检测
 * 【】通过当前工作目录下 「.eslintignore」 文件进行设置
 *  其使用的是Glob路径书写方式，与「.gitignore」的使用方法相同
 * 【】也可以在 package.json 文件中，通过 eslintIgnore 参数进行设置
 */
 
/**
 * 文件内局部设置
 * 【】eslint可以具体文件中设置特定代码的规则，常用于跳过某条语句的检测。
 * 【】注销全部规则，在代码前新建一行，添加注销 /* eslint-disable *\/  。如果没有恢复设置的语句，则下列全部代码都会跳过检测。
 * 【】恢复eslint，在代码前新建一行，添加注销 /* eslint-enable *\/
 * 【】指定忽略的规则，/* eslint-disable no-alert, no-console *\/
 * 【】在特定行禁用，// eslint-disable-line
 * 【】在下一行禁用，// eslint-disable-next-line
 */
 
module.exports = {
 
 /**
  * 根目录标识
  * http://eslint.cn/docs/user-guide/configuring#using-configuration-files
  * http://eslint.cn/docs/user-guide/configuring#configuration-cascading-and-hierarchy
  * 【】标识当前配置文件为最底层的文件，无需往更上一级的文件目录中进行搜索
  * 【】默认eslint的配置文件搜索方式是，从目标文件夹进行搜索，遍历内部每一个文件夹，找到配置文件并层叠使用。再跳出本项目，往祖先文件夹进行遍历
  * 【】注意「~/.eslintrc」的意义，「~」是指linux上的家目录，「~/.eslintrc」是指家目录下的eslint配置文件，用于私人开发者，用于整个电脑全局约束的。这个配置通过本配置项root去设置，设置了root,eslint检测时将不会再往上搜索
  * 【】eslint的生效规则是就近使用，越近的配置项优先级越高，覆盖其他配置项。如一个项目中，可以在不同文件夹中都添加配置文件，这些规则将重叠组合生效
  */
 root: true, // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
 
 
 /**
  * 解析器
  * http://eslint.cn/docs/user-guide/configuring#specifying-parser
  * 【】ESLint 默认使用Espree作为其解析器
  * 【】解析器必须是本地安装的一个 npm 模块。即必须按照在本地的node_module中
  * 【】解析器是用于解析js代码的，怎么去理解每一个表达式，有点C++中编译器的概念，会对js进行一些语法分析，语义分析什么的，才能判断语句符不符合规范。而不是通过简单的字符串对比。
  * 【】解析器有很多，但兼容eslint的解析器有以下几个
  * Espree：默认解析器，一个从Esprima中分离出来的解析器，做了一些优化
  * Esprima：js标准解析器
  * Babel-ESLint： 一个对Babel解析器的包装，babel本身也是js解析器的一种（不然怎么能转化为兼容性代码呢？首先需要进行js解析，才能转化）。如果我们的代码需要经过babel转化，则对应使用这个解析器
  * typescript-eslint-parser(实验) - 一个把 TypeScript 转换为 ESTree 兼容格式的解析器
  */
 parser: 'babel-eslint',
 
 
 /**
  * 解析器配置项
  * http://eslint.cn/docs/user-guide/configuring#specifying-parser-options
  * 【】这里设置的配置项将会传递到解析器中，被解析器获取到，进行一定的处理。具体被利用到，要看解析器的源码有没有对其进行利用。这里仅仅做了参数定义，做了规定，告诉解析器的开发者可能有这些参数
  * 【】配置项目有：
  * "sourceType": "module",  // 指定JS代码来源的类型，script(script标签引入？) | module（es6的module模块），默认为script。为什么vue的会使用script呢？因为vue是通过babel-loader编译的，而babel编译后的代码就是script方式
  * "ecmaVersion": 6,     // 支持的ES语法版本，默认为5。注意只是语法，不包括ES的全局变量。全局变量需要在env选项中进行定义
  * "ecmaFeatures": {     // Features是特征的意思，这里用于指定要使用其他那些语言对象
    "experimentalObjectRestSpread": true, //启用对对象的扩展
    "jsx": true,              //启用jsx语法
    "globalReturn":true,          //允许return在全局使用
    "impliedStrict":true          //启用严格校验模式
   }
  */
 parserOptions: {},
 
 
 /**
  * 运行环境
  * http://eslint.cn/docs/user-guide/configuring#specifying-environments
  * 【】一个环境定义了一组预定义的全局变量
  * 【】获得了特定环境的全局定义，就不会认为是开发定义的，跳过对其的定义检测。否则会被认为改变量未定义
  * 【】常见的运行环境有以下这些，更多的可查看官网
  * browser - 浏览器环境中的全局变量。
  * node - Node.js 全局变量和 Node.js 作用域。
  * es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
  * amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
  * commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
  * jquery - jQuery 全局变量。
  * mongo - MongoDB 全局变量。
  * worker - Web Workers 全局变量。
  * serviceworker - Service Worker 全局变量。
  */
 env: {
  browser: true, // 浏览器环境
 },
 
 
 /**
  * 全局变量
  * http://eslint.cn/docs/user-guide/configuring#specifying-globals
  * 【】定义额外的全局，开发者自定义的全局变量，让其跳过no-undef 规则
  * 【】key值就是额外添加的全局变量
  * 【】value值用于标识该变量能否被重写，类似于const的作用。true为允许变量被重写
  * 【】注意：要启用no-global-assign规则来禁止对只读的全局变量进行修改。
  */
 globals: {
  // gTool: true, // 例如定义gTool这个全局变量，且这个变量可以被重写
 },
 
 
 /**
  * 插件
  * http://eslint.cn/docs/user-guide/configuring#configuring-plugins
  * 【】插件同样需要在node_module中下载
  * 【】注意插件名忽略了「eslint-plugin-」前缀，所以在package.json中，对应的项目名是「eslint-plugin-vue」
  * 【】插件的作用类似于解析器，用以扩展解析器的功能，用于检测非常规的js代码。也可能会新增一些特定的规则。
  * 【】如 eslint-plugin-vue，是为了帮助我们检测.vue文件中 <template> 和 <script> 中的js代码
  */
 plugins: [
  'vue'
 ],
 
 
 /**
  * 规则继承
  * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
  *【】可继承的方式有以下几种
  *【】eslint内置推荐规则，就只有一个，即「eslint:recommended」
  *【】可共享的配置， 是一个 npm 包，它输出一个配置对象。即通过npm安装到node_module中
  *  可共享的配置可以省略包名的前缀 eslint-config-，即实际设置安装的包名是 eslint-config-airbnb-base
  *【】从插件中获取的规则，书写规则为 「plugin:插件包名/配置名」，其中插件报名也是可以忽略「eslint-plugin-」前缀。如'plugin:vue/essential'
  *【】从配置文件中继承，即继承另外的一个配置文件，如'./node_modules/coding-standard/eslintDefaults.js'
  */
 extends: [
  'plugin:vue/essential', // 额外添加的规则可查看 https://vuejs.github.io/eslint-plugin-vue/rules/
  /**
   * 「airbnb，爱彼迎」
   * 【】有两种eslint规范，一种是自带了react插件的「eslint-config-airbnb」，一种是基础款「eslint-config-airbnb-base」，
   * 【】airbnb-base 包括了ES6的语法检测，需要依赖 「eslint-plugin-import」
   * 【】所以在使用airbnb-base时，需要用npm额外下载 eslint-plugin-import
   * 【】所以eslint实际上已经因为 airbnb-base 基础配置项目，添加上了 eslint-plugin-import 插件配置
   * 【】所以在setting和rules里，都有 'import/xxx' 项目，这里修改的就是 eslint-plugin-import 配置
   */
  'airbnb-base',
 ],
 
 
 /**
  * 规则共享参数
  * http://eslint.cn/docs/user-guide/configuring#adding-shared-settings
  * 【】提供给具体规则项，每个参数值，每个规则项都会被注入该变量，但对应规则而言，有没有用，就看各个规则的设置了，就好比 parserOptions，解析器用不用它就不知道了。这里只是提供这个方法
  * 【】不用怀疑，经源码验证，这就是传递给每个规则项的，会当做参数传递过去，但用不用，就是具体规则的事情
  */
 settings: {
  /**
   *
   * 注意，「import/resolver」并不是eslint规则项，与rules中的「import/extensions」不同。它不是规则项
   * 这里只是一个参数名，叫「import/resolver」，会传递给每个规则项。
   * settings并没有具体的书写规则，「import/」只是import模块自己起的名字，原则上，它直接命名为「resolver」也可以，加上「import」只是为了更好地区分。不是强制设置的。
   * 因为「import」插件很多规则项都用的这个配置项，所以并没有通过rules设置，而是通过settings共享
   * 具体使用方法可参考https://github.com/benmosher/eslint-plugin-import
   */
  'import/resolver': {
   /**
    * 这里传入webpack并不是import插件能识别webpack，而且通过npm安装了「eslint-import-resolver-webpack」，
    * 「import」插件通过「eslint-import-resolver-」+「webpack」找到该插件并使用，就能解析webpack配置项。使用里面的参数。
    * 主要是使用以下这些参数，共享给import规则，让其正确识别import路径
    * extensions: ['.js', '.vue', '.json'],
    * alias: {
    * 'vue$': 'vue/dist/vue.esm.js',
    * '@': resolve('src'),
    * 'static': resolve('static')
    * }
    */
   webpack: {
    config: 'build/webpack.base.conf.js'
   }
  }
 },
 
 /**
  * 针对特定文件的配置
  * 【】可以通过overrides对特定文件进行特定的eslint检测
  * 【】特定文件的路径书写使用Glob格式，一个类似正则的路径规则，可以匹配不同的文件
  * 【】配置几乎与 ESLint 的其他配置相同。覆盖块可以包含常规配置中的除了 extends、overrides 和 root 之外的其他任何有效配置选项，
  */
 overrides: [
  {
   'files': ['bin/*.js', 'lib/*.js'],
   'excludedFiles': '*.test.js',
   'rules': {
    'quotes': [2, 'single']
   }
  }
 ],
 
 /**
  * 自定义规则
  * http://eslint.cn/docs/user-guide/configuring#configuring-rules
  * 【】基本使用方式
  * "off" 或者0 关闭规则
  * "warn" 或者1 将规则打开为警告（不影响退出代码）
  * "error" 或者2 将规则打开为错误（触发时退出代码为1）
  * 如：'no-restricted-syntax': 0, // 表示关闭该规则
  * 【】如果某项规则，有额外的选项，可以通过数组进行传递，而数组的第一位必须是错误级别。如0,1,2
  * 如 'semi': ['error', 'never'], never就是额外的配置项
  */
 rules: {
  /**
   * 具体规则
   * 【】具体的规则太多，就不做介绍了，有兴趣的同学可以上eslint官网查
   * 【】注意 xxx/aaa 这些规则是 xxx 插件自定的规则，在eslint官网是查不到的。需要到相应的插件官网中查阅
   * 【】如 import/extensions，这是「eslint-plugin-import」自定义的规则，需要到其官网查看 https://github.com/benmosher/eslint-plugin-import
   */
  'import/extensions': ['error', 'always', {
   js: 'never',
   vue: 'never'
  }],
  'import/no-extraneous-dependencies': ['error', {
   optionalDependencies: ['test/unit/index.js']
  }],
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  "no-restricted-syntax": 0, //
  "guard-for-in": 0, //
  "prefer-const": 0, //
  "no-else-return": 0, //
  "no-plusplus": 0, // 不允许使用++符号
  "object-shorthand": ["error", "always", { "avoidQuotes": false }], // 去除禁止'videoData.isPause'(newValue) 的命名
  "no-lonely-if": 0, // 不允许给函数参数重新赋值
  "no-param-reassign": 0, // 不允许给函数参数重新赋值
  "no-mixed-operators": 0, // 不允许混合使用运算符
  "no-underscore-dangle": 0, // 不允许下划线作为变量名之一
  "no-under": 0, // 不允许混合使用运算符
  'generator-star-spacing': 'off',
  'no-console': 'off', // 禁用no-console规则
  'semi': ['error', 'never'], // 行尾不使用分号
  'comma-dangle': ['error'],
  'eqeqeq': 0, // 不需要强制使用全等
  'max-len': 0,
  'radix': 0,// parseInt不需要传第二个参数
  'linebreak-style': 0, // 强制执行一致的换行样式，windows和mac不一样
  'consistent-return': 0, // 箭头函数最后不需要最后强制return值
  'no-unused-expressions': ["error", { "allowShortCircuit": true, "allowTernary": true }], // 允许您在表达式中使用三元运算符
  'no-multi-spaces': ['error', { "ignoreEOLComments": true }],
 }
}

配置

有两种主要的方式来配置 ESLint：

  1. Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
  2. Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件为整个目录（处理你的主目录）和它的子目录指定配置信息。可以配置一个独立的 .eslintrc.* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们，再者，你可以在命令行运行时指定一个任意的配置文件。

(指定)解析器选项 Specifying Parser Options

解析器选项可以在 .eslintrc.* 文件使用 parserOptions 属性设置。可用的选项有：

  • ecmaVersion - 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)

  • sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。

  • ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:

    • globalReturn - 允许在全局作用域下使用 return 语句
    • impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
    • jsx - 启用 JSX
    • experimentalObjectRestSpread - 启用实验性的 object rest/spread properties 支持。(重要： 这是一个实验性的功能,在未来可能会有明显改变。 建议你写的规则 不要 依赖该功能，除非当它发生改变时你愿意承担维护成本。)

(指定)解析器 Specifying Parser

ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：

  1. 它必须是一个 Node 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 npm 单独安装解析器包。
  2. 它必须符合 parser interface。
    为了表明使用该 npm 模块作为你的解析器，你需要在你的 .eslintrc 文件里指定 parser 选项。例如，下面的配置指定了 Esprima 作为解析器：
{
    "parser": "esprima",
    "rules": {
        "semi": "error"
    }
}

以下解析器与 ESLint 兼容：

(指定)处理器 Specifying Processor

插件可以提供处理器。处理器可以从另一种文件中提取 JavaScript 代码，然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。

若要在配置文件中指定处理器，请使用 processor 键，并使用由插件名和处理器名组成的串接字符串加上斜杠。例如，下面的选项启用插件 a-plugin 提供的处理器 a-processor：

{
    "plugins": ["a-plugin"],
    "processor": "a-plugin/a-processor"
}

要为特定类型的文件指定处理器，请使用 overrides 键和 processor 键的组合。例如，下面对 *.md 文件使用处理器 a-plugin/markdown。

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        }
    ]
}

处理器可以生成命名的代码块，如 0.js 和 1.js。ESLint 将这样的命名代码块作为原始文件的子文件处理。你可以在配置的 overrides 部分为已命名的代码块指定附加配置。例如，下面的命令对以 .js 结尾的 markdown 文件中的已命名代码块禁用 strict 规则。

{
    "plugins": ["a-plugin"],
    "overrides": [
        {
            "files": ["*.md"],
            "processor": "a-plugin/markdown"
        },
        {
            "files": ["**/*.md/*.js"],
            "rules": {
                "strict": "off"
            }
        }
    ]
}

ESLint 检查指定代码块的文件扩展名，如果 --ext CLI option 不包含文件扩展名，则忽略这些扩展名。如果您想要删除除 *.js 之外的已命名代码块，请确保指定 --ext 选项。

(指定)环境 Specifying ENvironments

可以在源文件里、在配置文件中或使用 命令行 的 --env 选项来指定环境。

  • 要在你的 JavaScript 文件中使用注释来指定环境，格式如下：

    /* eslint-env node, mocha */

    该设置启用了 Node.js 和 Mocha 环境。

  • 要在配置文件里指定环境，使用 env 关键字指定你想启用的环境，并设置它们为 true。例如，以下示例启用了 browser 和 Node.js 的环境：

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

  • 或在 package.json 文件中：

    {
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

如果你想在一个特定的插件中使用一种环境，确保提前在 plugins 数组里指定了插件名，然后在 env 配置中不带前缀的插件名后跟一个 / ，紧随着环境名。例如：

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

或在 package.json 文件中

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "plugins": ["example"],
        "env": {
            "example/custom": true
        }
    }
}

(指定)全局变量 Specifying Globals

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

(配置)第三方插件 Configuring Plugins

  1. ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。

  2. 在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

    {
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

注意： 插件是相对于 ESLint 进程的当前工作目录解析的。换句话说，ESLint 将加载与用户通过从项目 Node 交互解释器运行 ('eslint-plugin-pluginname') 获得的相同的插件。

(配置)规则 Configuring Rules

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

(注释方式省略)

在配置文件中进行规则配置, 使用 rules 连同错误级别和任何你想使用的选项，例如：

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

配置定义在插件中的一个规则的时候，你必须使用 插件名/规则ID 的形式。比如：

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

禁用规则

(注释式省略)
若要禁用一组文件的配置文件中的规则，请使用 overrides 和 files。例如:

{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}

添加共享设置 Adding Shared Settings

ESLint 支持在配置文件添加共享设置。你可以添加 settings 对象到配置文件，它将提供给每一个将被执行的规则。如果你想添加的自定义规则而且使它们可以访问到相同的信息，这将会很有用，并且很容易配置。

在 JSON 中：

{
    "settings": {
        "sharedData": "Hello"
    }
}

使用配置文件 Using Configuration Files

有两种方式使用配置文件:

  1. 通过 .eslintrc.* 和 package.json 文件。ESLint 将自动在要检测的文件目录里寻找它们，紧接着是父级目录，一直到文件系统的根目录（除非指定 root: true）。当你想对一个项目的不同部分的使用不同配置，或当你希望别人能够直接使用 ESLint，而无需记住要在配置文件中传递什么，这种方式就很有用。

  2. 使用 -c 选项传递命令行将文件保持到你喜欢的地方。

    eslint -c myconfig.json myfiletotest.js

如果你使用一个配置文件，想要 ESLint 忽略任何 .eslintrc.* 文件，请确保使用 --no-eslintrc 的同时，加上 -c 标记。

每种情况，配置文件都会覆盖默认设置。

配置文件格式 Configuration Files Formats

ESLint 支持几种格式的配置文件：

  • JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
  • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
  • JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
  • (弃用)  - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
  • package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。

如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

层叠配置 Configuration Cascading and Hierarchy

比较少用,这里不赘述 (eslint.bootcss.com/docs/user-g…)

继承配置 Extending Configuration Files

一个配置文件可以被基础配置中的已启用的规则继承。

extends 属性值可以是：

  • 指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
  • 字符串数组：每个配置继承它前面的配置

ESLint递归地扩展配置，因此基本配置也可以具有 extends 属性。extends 属性中的相对路径和可共享配置名从配置文件中出现的位置解析。

rules 属性可以做下面的任何事情以扩展（或覆盖）规则：

  • 启用额外的规则

  • 改变继承的规则级别而不改变它的选项：

    • 基础配置："eqeqeq": ["error", "allow-null"]
    • 派生的配置："eqeqeq": "warn"
    • 最后生成的配置："eqeqeq": ["warn", "allow-null"]

  • 覆盖基础配置中的规则的选项

    • 基础配置："quotes": ["error", "single", "avoid-escape"]
    • 派生的配置："quotes": ["error", "single"]
    • 最后生成的配置："quotes": ["error", "single"]

Using "eslint:recommended"

值为 "eslint:recommended" 的 extends 属性启用一系列核心规则，这些规则报告一些常见问题，在 规则页面 中被标记为  。这个推荐的子集只能在 ESLint 主要版本进行更新。

如果你的配置集成了推荐的规则：在你升级到 ESLint 新的主版本之后，在你使用命令行的 --fix 选项之前，检查一下报告的问题，这样你就知道一个新的可修复的推荐的规则将更改代码。

eslint --init 命令可以创建一个配置，这样你就可以继承推荐的规则。

JavaScript 格式的一个配置文件的例子：

module.exports = {
    "extends": "eslint:recommended",
    "rules": {
        // enable additional rules
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],

        // override default options for rules from base configurations
        "comma-dangle": ["error", "always"],
        "no-cond-assign": ["error", "always"],

        // disable rules from base configurations
        "no-console": "off",
    }
}

Using a shareable configuration package

可共享的配置 是一个 npm 包，它输出一个配置对象。要确保这个包安装在 ESLint 能请求到的目录下。

extends 属性值可以省略包名的前缀 eslint-config-。

eslint --init 命令可以创建一个配置，这样你就可以扩展一个流行的风格指南（比如，eslint-config-standard）。

YAML 格式的一个配置文件的例子：

extends: standard
rules:
  comma-dangle:
    - error
    - always
  no-empty: warn

Using the configuration from a plugin

插件 是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的 配置。要确保这个包安装在 ESLint 能请求到的目录下。

plugins 属性值 可以省略包名的前缀 eslint-plugin-。

extends 属性值可以由以下组成：

  • plugin:
  • 包名 (省略了前缀，比如，react)
  • /
  • 配置名称 (比如 recommended)

JSON 格式的一个配置文件的例子：

{
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "no-set-state": "off"
    }
}

Using a configuration file

extends 属性值可以是到基本配置文件的绝对路径，也可以是相对路径。ESLint 解析一个相对于使用它的配置文件的基本配置文件的相对路径。

ESLint 解析基本配置文件的相对路径相对你你使用的配置文件，除非那个文件在你的主目录或非 ESLint 安装目录的父级目录。在这些情况下，ESLint 解析基本配合文件的相对路径相对于被检测的 项目目录（尤其是当前工作目录）。

JSON 格式的一个配置文件的例子：

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        "./node_modules/coding-standard/.eslintrc-es6",
        "./node_modules/coding-standard/.eslintrc-jsx"
    ],
    "rules": {
        "eqeqeq": "warn"
    }
}

Using "eslint:all"

extends 属性值可以是 "eslint:all"，启用当前安装的 ESLint 中所有的核心规则。这些规则可以在 ESLint 的任何版本进行更改。

重要： 这些配置 不推荐在产品中使用，因为它随着 ESLint 版本进行更改。使用的话，请自己承担风险。

如果你配置 ESLint 升级时自动地启用新规则，当源码没有任何改变时，ESLint 可以报告新问题，因此任何 ESLint 的新的小版本好像有破坏性的更改。

当你决定在一个项目上使用的规则和选项，尤其是如果你很少覆盖选项或禁用规则，你可能启用所有核心规则作为一种快捷方式使用。规则的默认选项并不是 ESLint 推荐的（例如，quotes 规则的默认选项并不意味着双引号要比单引号好）。

如果你的配置扩展了所有的核心规则：在你升级到一个新的大或小的 ESLint 版本，在你使用命令行的 --fix 选项之前，检查一下报告的问题，这样你就知道一个新的可修复的规则将更改代码。

JavaScript 格式的一个配置文件的例子：

module.exports = {
    "extends": "eslint:all",
    "rules": {
        // override default options
        "comma-dangle": ["error", "always"],
        "indent": ["error", 2],
        "no-cond-assign": ["error", "always"],

        // disable now, but enable in the future
        "one-var": "off", // ["error", "never"]

        // disable
        "init-declarations": "off",
        "no-console": "off",
        "no-inline-comments": "off",
    }
}

Configuration Based on Glob Patterns

v4.1.0+.  有时，你可能需要更精细的配置，比如，如果同一个目录下的文件需要有不同的配置。因此，你可以在配置中使用 overrides 键，它只适用于匹配特定的 glob 模式的文件，使用你在命令行上传递的格式 (e.g., app/**/*.test.js)。

How it works

  • Glob 模式覆盖只能在配置文件 (.eslintrc.* 或 package.json) 中进行配置。

  • 模式应用于相对于配置文件的目录的文件路径。 比如，如果你的配置文件的路径为 /Users/john/workspace/any-project/.eslintrc.js 而你要检测的路径为 /Users/john/workspace/any-project/lib/util.js，那么你在 .eslintrc.js 中提供的模式是相对于 lib/util.js 来执行的.

  • 在相同的配置文件中，Glob 模式覆盖比其他常规配置具有更高的优先级。 同一个配置中的多个覆盖将按顺序被应用。也就是说，配置文件中的最后一个覆盖会有最高优先级。

  • 一个 glob 特定的配置几乎与 ESLint 的其他配置相同。覆盖块可以包含常规配置中的除了 root 之外的其他任何有效配置选项，

    • 一个 glob 特定的配置可以有 extends 设置，但是会忽略扩展配置中的 root 属性。
    • 只有当父配置和子配置的 glob 模式匹配时，才会应用嵌套的 overrides 设置。当扩展配置具有 overrides 设置时也是如此。

  • 可以在单个覆盖块中提供多个 glob 模式。一个文件必须匹配至少一个配置中提供的模式。

  • 覆盖块也可以指定从匹配中排除的模式。如果一个文件匹配了任何一个排除模式，该配置将不再被应用。

Relative glob patterns

project-root
├── app
│   ├── lib
│   │   ├── foo.js
│   │   ├── fooSpec.js
│   ├── components
│   │   ├── bar.js
│   │   ├── barSpec.js
│   ├── .eslintrc.json
├── server
│   ├── server.js
│   ├── serverSpec.js
├── .eslintrc.json

在 app/.eslintrc.json 文件中的配置定义了 **/*Spec.js glob 模式。该模式相对于 app/.eslintrc.json 的基准目录。因此，该模式匹配 app/lib/fooSpec.js 和 app/components/barSpec.js，但 不匹配 server/serverSpec.js。如果你在项目根目录的 .eslintrc.json 文件中定义相同的模式，它将匹配所有三个 *Spec 文件。

Example configuration

在你的 .eslintrc.json 文件中：

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

  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}

Comments in Configuration Files

JSON 和 YAML 配置文件格式都支持注释 ( package.json 文件不应该包括注释)。你可以在其他类型的文件中使用 JavaScript 风格的注释或使用 YAML 风格的注释，ESLint 会忽略它们。这允许你的配置更加人性化。例如：

{
    "env": {
        "browser": true
    },
    "rules": {
        // Override our default settings just for this directory
        "eqeqeq": "warn",
        "strict": "off"
    }
}

Specifying File extensions to Lint

目前，告诉 ESLint 哪个文件扩展名要检测的唯一方法是使用 --ext 命令行选项指定一个逗号分隔的扩展名列表。注意，该标记只在与目录一起使用时有效，如果使用文件名或 glob 模式，它将会被忽略。

Ignoring Files and Directories

.eslintignore

你可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。例如，以下将忽略所有的 JavaScript 文件：

**/*.js

当 ESLint 运行时，在确定哪些文件要检测之前，它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件，当遍历目录时，将会应用这些偏好设置。一次只有一个 .eslintignore 文件会被使用，所以，不是当前工作目录下的 .eslintignore 文件将不会被用到。

Globs 匹配使用 node-ignore，所以大量可用的特性有：

  • 以 # 开头的行被当作注释，不影响忽略模式。
  • 路径是相对于 .eslintignore 的位置或当前工作目录。通过 --ignore-pattern command 传递的路径也是如此。
  • 忽略模式同 .gitignore 规范
  • 以 ! 开头的行是否定模式，它将会重新包含一个之前被忽略的模式。
  • 忽略模式依照 .gitignore 规范.

特别值得注意的是，就像 .gitignore 文件，所有用作 .eslintignore 和 --ignore-pattern 模式的路径必须使用前斜杠作为它们的路径分隔符。

# Valid
/root/src/*.js

# Invalid
\root\src*.js

请参参阅 .gitignore 规范查看有关有效语法的更多示例。

除了 .eslintignore 文件中的模式，ESLint总是忽略 /node_modules/* 和 /bower_components/* 中的文件。

例如：把下面 .eslintignore 文件放到当前工作目录里，将忽略项目根目录下的 node_modules，bower_components 以及 build/ 目录下除了 build/index.js 的所有文件。

# /node_modules/* and /bower_components/* in the project root are ignored by default

# Ignore built files except build/index.js
build/*
!build/index.js

重要： 注意代码库的 node_modules 目录，比如，一个 packages 目录，默认情况下不会被忽略，需要手动添加到 .eslintignore。

Using an Alternate File

如果相比于当前工作目录下 .eslintignore 文件，你更想使用一个不同的文件，你可以在命令行使用 --ignore-path 选项指定它。例如，你可以使用 .jshintignore 文件，因为它有相同的格式：

eslint --ignore-path .jshintignore file.js

你也可以使用你的 .gitignore 文件：

eslint --ignore-path .gitignore file.js

任何文件只要满足标准忽略文件格式都可以用。记住，指定 --ignore-path 意味着任何现有的 .eslintignore 文件将不被使用。请注意，.eslintignore 中的匹配规则比 .gitignore 中的更严格。

Using eslintIgnore in package.json

如果没有发现 .eslintignore 文件，也没有指定替代文件，ESLint 将在 package.json 文件中查找 eslintIgnore 键，来检查要忽略的文件。

{
  "name": "mypackage",
  "version": "0.0.1",
  "eslintConfig": {
      "env": {
          "browser": true,
          "node": true
      }
  },
  "eslintIgnore": ["hello.js", "world.js"]
}

Ignored File Warnings

当你传递目录给 ESLint，文件和目录是默默被忽略的。如果你传递一个指定的文件给 ESLint，你会看到一个警告，表明该文件被跳过了。例如，假如你有一个像这样的 .eslintignore文件：

foo.js

然后你执行：

eslint foo.js

你将会看到这个警告：

foo.js
  0:0  warning  File ignored because of your .eslintignore file. Use --no-ignore to override.

✖ 1 problem (0 errors, 1 warning)

这种消息出现是因为 ESLint 不确定你是否想检测文件。正如这个消息表明的那样，你可以使用 --no-ignore 覆盖忽略的规则。

ESLint官网

用户指南

快速开始
配置ESLint
命令行接口
规则
格式化程序
集成

配置ESLint

ESLint 旨在为您的用例灵活和可配置。您可以关闭每个规则并仅在基本语法验证的情况下运行，或者混合并匹配捆绑的规则和您的自定义规则以满足您的项目需求。配置 ESLint 有两种主要方法：

  1. 配置注释- 使用 JavaScript 注释将配置信息直接嵌入到文件中。
  2. 配置文件- 使用 JavaScript、JSON 或 YAML 文件来指定整个目录及其所有子目录的配置信息。这可以是.eslintrc.*文件或文件中的eslintConfig字段的形式，ESLint 都会自动查找和读取这两种形式，也可以在命令行package.json中指定配置文件。

以下是您可以在 ESLint 中配置的一些选项：

  • 环境- 您的脚本设计用于运行的环境。每个环境都带有一组特定的预定义全局变量。
  • 全局变量 - 您的脚本在执行期间访问的其他全局变量。
  • 规则- 启用哪些规则以及在什么错误级别。
  • 插件- 第三方插件为 ESLint 定义了额外的规则、环境、配置等。

所有这些选项都让您可以细粒度地控制 ESLint 如何处理您的代码。

目录

配置文件

语言选项

规则

插件

忽略代码

avatar
文章
阅读
粉丝