ESlint--共享、Globs与.exlint.*.配置文件的匹配、extend

本文深入探讨ESLint的配置方法,包括如何使用settings对象提供共享信息给规则,层叠配置的原理,extends属性的使用,以及如何通过.eslintignore文件排除特定文件。了解这些配置技巧能帮助开发者更高效地管理和维护代码质量。

添加共享对象

在.eslint.*文件中添加 settings 的对象将提供给每一个将被执行的规则

如果想添加的自定义规则而且使它们可以访问到相同的信息,那么就可以添加settings配置

{
	"settings":{
		"showData":"hello"
	}
}

glob与.exlint.*.配置文件的匹配

.exlint.*.配置文件的匹配

当使用.eslintrc.* 和 package.json文件的配置时可以利用层叠配置

例如,假如存在以下结构:
your-project
├── .eslintrc
├── lib
│ └── source.js
└─┬ tests
├── .eslintrc
└── test.js

ESLint 解析基本配置文件的相对路径相对你你使用的配置文件

test目录下存在.eslintrc文件,所以在检测test.js是调用的是test目录下的.eslintrc文件
而lib目录下不存在.eslintrc文件,但他的上级目录下存在.eslintrc文件,那么在检测 source.js是调用的是your-project目录下的.eslintrc文件

层叠配置使用离要检测的文件最近的 .eslintrc文件作为最高优先级,
然后才是父目录里的配置文件
同样的,如果在根目录的 package.json 文件中有一个 eslintConfig 字段,
其中的配置将使用于所有子目录,
但是当 tests 目录下的 .eslintrc 文件中的规则与之发生冲突时,就会覆盖它(package.json中的定义)

如果同一目录下 .eslintrc 和 package.json 同时存在,
.eslintrc 优先级高会被使用,package.json 文件将不会被使用

默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。
如果你想要你所有项目都遵循一个特定的约定时,这将会很有用,
但有时候会导致意想不到的结果。
为了将 ESLint 限制到一个特定的项目,在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 “root”: true。
ESLint 一旦发现配置文件中有 “root”: true,它就会停止在父级目录中寻找。

extends:

extends的属性值可以是指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)

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

	{
		extends:'eslint:recommended',
	}
启用额外的规则

改变继承的规则级别而不改变它的选项:
基础配置:“eqeqeq”: [“error”, “allow-null”]
派生的配置:“eqeqeq”: “warn”
最后生成的配置:“eqeqeq”: [“warn”, “allow-null”]

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

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

extends插件中的rules可以省略包名的前缀 eslint-config,
但必须要有插件名字和配置名称 (比如 recommended)
例如

{
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"  //plugin:插件名/rules集
    ],
    "rules": {
       "no-set-state": "off"
    }
}
extends时使用 “eslint:all”
{
	"extends":[
		"eslint:all"
	]
}

extends 属性值可以是 “eslint:all”,启用当前安装的 ESLint 中所有的核心规则

警告:这些配置不推荐在产品中使用,因为它随着 ESLint 版本进行更改

规则详情:eslint中文文档

glob
	这里假设url按照斜杠分隔后的片段为字符串
	*一颗星表示的是一个字符串
	例子:
		./src/*.js 	匹配的是当前目录下的src文件夹中的所有js文件,
						只能是匹配直接在src文件夹下的
	**两颗星星表示任意个数的字符串
	例子:
		./src/**/*.js 匹配的是当前目录下的src文件夹中的任意深度的js文件

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

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

Globs 匹配使用 node-ignore有大量可用的特性:
1、以 # 开头的行被当作注释,不影响忽略模式
2、路径是相对于 .eslintignore 的位置或当前工作目录

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值