包括全局变量,配置插件、配置规则、内嵌注释代码禁用规则,扩展配置、忽略文件和目录
目录
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"]
}