eslint从入门到放弃（五）eslint配置之extends（共享配置）

上文说了eslint配置之规则，今天说下ESLint配置中的extends（共享配置），前文传送门，

eslint从入门到放弃（一）eslint入门

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；
  一个执行配置文件的相对路径或绝对路径；

欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！