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

目录

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"]
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！