包括全局变量，配置插件、配置规则、内嵌注释代码禁用规则，扩展配置、忽略文件和目录

目录

1. 全局变量

2.配置插件

3.扩展配置

4.配置规则

5.内嵌注释代码禁用规则

6.忽略文件和目录

1. 全局变量

no-undef规则将对已访问但未在同一文件中定义的变量发出警告。如果你在一个文件中使用全局变量，那么定义这些全局变量是值得的，这样ESLint就不会警告它们的用法。您可以使用文件内部的注释或配置文件来定义全局变量。

例如： 

 // jquery实际已经引入，但此时会因为$没有在这个文件里定义而使得eslint报出 $未定义的错误。 $('#app').click(function(){    // do something  })

为了防止上边这种情况，可以在eslint 配置文件里填加这个全局变量来解决这个问题。

 module.exports = {   root: true,   parserOptions: {     parser: 'babel-eslint',     sourceType: 'module'   },   env: {     browser: true,     node: true,     es6: true,   },   globals: {     $: true,     var2: false   } }

这定义了两个全局变量，$和var2。如果你想要选择指定这些全局变量永远不应该被写入（只读），那么你可以设置每个false标志 

允许覆盖变量则写成 true 。

2.配置插件

ESLint支持使用第三方插件。在使用插件之前，您必须使用npm进行安装。

要在配置文件中配置插件，请使用plugins包含插件名称列表名称。

虽然官方提供了上百种的规则可供选择，但是这还不够，因为官方的规则只能检查标准的 JavaScript 语法，如果你写的是 JSX 或者 Vue 单文件组件，这个时候就需要安装 ESLint 的插件，来定制一些特定的规则进行检查。ESLint 的插件与扩展一样有固定的命名格式，以 eslint-plugin- 开头，该eslint-plugin-前缀可以从插件名称被省略。

 module.exports = {   root: true,   parserOptions: {     parser: 'babel-eslint',     sourceType: 'module'   },   env: {     browser: true,     node: true,     es6: true,   },   globals: {     $: true,     var2: false   },   plugins: [     'vue',  // 实际上是eslint-plugin-vue   ], }

3.扩展配置

该extends属性值是，ESLint递归地扩展配置：

• 一个指定配置的字符串
• 一个字符串数组：每个附加配置扩展了前面的配置

扩展就是直接使用别人已经写好的 规则。扩展一般支持三种类型：

  module.exports = {   root: true,   parserOptions: {     parser: 'babel-eslint',     sourceType: 'module'   },   env: {     browser: true,     node: true,     es6: true,   },   globals: {     $: true,     var2: false   },   plugins: [     'vue',  // 实际上是eslint-plugin-vue   ],   extends: [     "eslint:recommended",     "plugin:vue/recommended",     "eslint-config-standard"   ] }

• eslint: 开头的是 ESLint 官方的扩展，一共有两个：eslint:recommended 、eslint:all （官方不建议用）。
• plugin: 开头的是扩展是插件类型，也可以直接在 plugins 属性中进行设置。
• 最后一种扩展来自 npm 包，官方规定 npm 包的扩展必须以 eslint-config- 开头，使用时可以省略这个头，上面案例中 eslint-config-standard 可以直接简写成 standard
• 拓展的eslint-config-vue插件就有几种拓展看如图

 使用的时候选一种你需要的

所以最后的规则就是 以下边这个案例为例

 "extends": [     "eslint:recommended",     "plugin:vue/recommended",     "eslint-config-standard"   ]

eslint: recommended eslint官方推荐使用的规则，加上  eslint-config-vue 里的 配置下  recommended 的规则，再加上eslint-config-standard的规则。上边只是举例。（实际不要用我写的顺序）。

注意事项：

• 当插件内就一个规则，就直接在extent里写就行了
• 当插件像eslint-config-vue这种有好几种规则，那就插件里要写，拓展里选择要使用的规则 例如下边

 module.exports = {  root: true,   env: {     browser: true,     es6: true,   },   parserOptions: {     ecmaVersion: 11,     sourceType: 'module',   },   extends: [     'plugin:vue/essential',     'airbnb-base',   ],   plugins: [     'vue',   ],   rules: {   }, };

4.配置规则

ESLint带有大量的规则。您可以使用配置注释或配置文件来修改项目使用的规则。要更改规则设置，您必须将规则ID设置为等于以下值之一：

• "off"或者0– 关闭规则
• "warn"或者1– 将规则打开为警告（不影响退出代码）
• "error"或者2– 将规则打开为错误（触发时退出代码为1）

把需要配置的规则放到 rules字段下

要配置在插件中定义的规则，必须在规则ID前加上插件名称和/+ 规则名称 例如：

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

 从插件中指定规则时，请确保省略eslint-plugin-。ESLint在内部仅使用前缀名来查找规则

要使用配置注释配置文件内部的规则  格式为  /* eslint 内容  */

 /* eslint eqeqeq: "off", curly: "error" */

5.内嵌注释代码禁用规则

在你项目内的代码时，遇到你需要写，又是eslint规则里不允许的，这个时候用这个。 这样子就不会报错了。

要临时禁用文件中某段代码的规则警告，请按以下格式使用块注释  

 /* eslint-disable */  alert('foo');  /* eslint-enable */

在某段代码内只是禁用一些特定规则

 /* eslint-disable no-alert, no-console */  alert('foo'); console.log('bar');  /* eslint-enable no-alert, no-console */

 要在整个文件中禁用规则警告，请在文件/* eslint-disable */顶部放置块注释：

 /* eslint-disable */  alert('foo');

禁用某一行

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

下一行不要检测，禁用规则

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

注意：为文件的一部分禁用警告的注释告诉ESLint不要报告禁用代码的规则违规。然而，ESLint仍然会解析整个文件，因此禁用的代码仍然需要语法上有效的JavaScript。

虽然可以禁用规则，但是不要见到报错就用这个作弊规则，坑的是自己。只有那些在现有规则下没有的情况下，或者非常的特别情况，否则不要用。要不满篇的这种注释，还用eslint干嘛呢！！！！

6.忽略文件和目录

可以通过.eslintignore在项目的根目录中创建一个文件来告诉ESLint忽略特定的文件和目录。

.eslintignore 文件

 build/*.js config/*.js src/assets

或者package.json中加入

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