上文说了eslint配置之规则，今天说下ESLint配置中的extends（共享配置），前文传送门，
eslint从入门到放弃（二）esLint配置之globals
eslint从入门到放弃（三）ESLint配置之env（三）
eslint从入门到放弃（四）eslint配置之规则
大家好我是【小枫学幽默】，这是我eslint从入门到放弃系列教程的第五篇，欢迎关注后续更新。接下来步入正题：
ESLint配置之extends（共享配置）
ESLint extends （共享配置） 是个啥？这玩意儿有啥用？
在前文eslint从入门到放弃之eslint配置之规则（四）中我们讲过，项目中的.eslintrc（eslint配置文件）中的rules就是eslint配置中的规则(rule)的集合，就是来告诉eslint如何检查代码的；
单说官网的规则大概有308个，可往往我们面临以下问题
- 1、我们项目中的代码风格虽然是千差万别的，总有一部分规则是一致的（比如 un-undef），这部分规则每个项目都去配置一遍，很花费时间
- 2、一个大的规范化的团队，代码风格通常都是一样的，多个项目之间共享代码规则，通过代码拷贝的方式是很麻烦的
- 3、当没有固定规范的时候，小团队是不是可以跟大厂看齐？能否引用大厂的规范？
所以eslint提供了extends（共享配置）来帮我们解决这个问题，extends就是来帮我们引入别人已经配置好的规则的，我们只需要在extends中引入别人配置好的规则，如果别人的规则在自己的项目中不合适，我们根据自己的需求覆盖对应规则即可，extends可以帮我们节省大量的时间。
extends 怎么用？
首先，我们新建一个demo目录，文件结构如下
demo
├── .eslintrc.js
├── package.json
└── rules.js
.eslintrc.js（eslint配置文件）内容如下
module.exports = {
"extends": "standard",
// "extends": "eslint-config-standard",
// 跟上面一样，只是换了个写法 当共享的配置文件命名遵循了```eslint-config-*```的命名规范时，可以省略```eslint-config-```
}
rules.js（我们要用eslint校验的文件）
a = 12
add(1, 2)
打开命令行，进入demo目录，安装我们
extends的规则
# 这里可以去看eslint-config-standard，都包含哪些规则
# https://github.com/standard/eslint-config-standard/blob/master/src/index.ts
npm install eslint-config-standard --save-dev
# 不要问我为啥要装下面这个包，我看了eslint-config-standard的 package.json
# 发现它依赖了下面这个包，
npm install eslint-plugin-import --save-dev
用eslint校验下rules.js
npx eslint rules.js -c .eslintrc.js
demo/rules.js
1:1 error 'a' is not defined no-undef
2:1 error 'add' is not defined no-undef
extends 可以使用多个共享配置吗？
当然可以！！
做如下修改即可 .eslintrc.js（eslint配置文件）内容如下
// 使用多个共享配置时，需要使用数组
// 使用前要先安装对应的包哦（npm i eslint-config-airbnb-base）
module.exports = {
"extends": ["standard", "eslint-config-airbnb-base"],
}
extends 可以引用本地的共享配置吗？
当然可以！！
在根目录下创建一个
custom-config.js文件，内容如下
module.exports = {
"rules": {
// 这里覆盖掉standard的no-undef规则
"no-undef": "off",
}
}
在 .eslintrc.js 引用这个文件
// 使用多个共享配置时，需要使用数组
// 使用前要先创建这个文件哦
module.exports = {
"extends": ["standard", , "./custom-config.js"],
}
extends standard之后如果我不想用使用standard的某个规则怎么办？
只需要在.eslintrc.js中的rules中添加跟standard同名规则的设置项即可覆盖standard的规则；
例如standard下定义了'no-undef': 'error'报错，我就是任性，我就是不想让 eslint在发现我使用了未定义变量的时候告诉我，我可以通过以下配置禁用这个规则
做如下修改即可 .eslintrc.js（eslint配置文件）内容如下
module.exports = {
"extends": "standard",
"rules": {
// 这里可以修改standard的规则
"no-undef": "off",
}
}
用eslint校验下rules.js
npx eslint rules.js -c .eslintrc.js
# 无任何输出，因为我关掉了```no-undef```这个规则
demo/rules.js
ESLint 共享配置使用文档
官方文档 >> 传送门
有哪些常用的共享配置
- eslint:recommended：ESLint 内置的推荐规则，即 ESLint Rules 列表中打了钩的那些规则；
- eslint:all：ESLint 内置的所有规则；
- eslint-config-standard[7]：standard 的 JS 规范；
- eslint-config-prettier[8]：关闭和 ESLint 中以及其他扩展中有冲突的规则；
- eslint-config-airbnb-base：airbab 的 JS 规范；
- eslint-config-alloy[9]：腾讯 AlloyTeam 前端团队出品，可以很好的针对你项目的技术栈进行配置选择，比如可以选 React、Vue（现已支持 Vue 3.0）、TypeScript 等；
extends 支持的配置类型可以是以下几种
- eslint 开头的：是 ESLint 官方的扩展；
- plugin 开头的：是插件类型扩展，比如 plugin:vue/essential；
- eslint-config 开头的：来自 npm 包，使用时可以省略前缀 eslint-config-，比如上面的可以直接写成 standard；
- @开头的：扩展和 eslint-config 一样，只是在 npm 包上面加了一层作用域 scope；
一个执行配置文件的相对路径或绝对路径；
欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！
