eslint plugins与extends的区别

在配置eslint时，针对rules的配置很是头疼，主要是针对如下两个点：

1. 该规则在哪里定义的，指规则在哪里创建的
2. 该规则在哪里配置的，指规则的0,1,2在哪里配置的

研究一段时间发现，eslint配置的核心是如下三个字段：

1. plugins

   eslint本身有些规则，但肯定无法包含所有语法，因此eslint支持自定义规则，而针对特殊语法自定义的那些规则我们称之为eslint插件，常见的有： eslint-plugin-import、eslint-plugin-promise、eslint-plugin-react。这些插件都是单独的package，安装这些插件后，若要是项目支持这些规则，必须将其配置在eslint字段中，比如针对如上三个示例插件的配置：plugins: ["import", 'promise', 'react']。 这个字段解答了第一个问题

2. extends

   plugins的配置仅仅代表在项目中引入了哪些规则，并没有指明该规则是警告、报错、忽略，extends要做的就是引入eslint推荐的规则设置。按照eslint插件的开发规范，每个插件的入口文件都会导出一个对象，其中就有一个configs字段，该字段是个对象，他可以把该插件已有的规则分成不同的风格，比如：x eslint插件共定义了a、b、c三个规则，这三个规则我可以配置多种风格，比如：

   module.exports = {
       configs: {
           recommended: {
               plugins: ["x"],
               env: ["browser"],
               rules: {
                   a: 1,
                   b: 0,
                   a: 2,
               }
           },
           node: {
               plugins: ["x"],
               env: ["node"],
               rules: {
                   a: 0,
                   b: 2,
                   a: 1,
               }
           }
       }
   };
   

   假设我们要选择recommended风格，在extends字段中填写 ["plugin:x/recommended"]。至此，项目便可以基于X语法的recommended风格做代码检测

   官方提示：extends 属性值可以是 "eslint:all"，启用当前安装的 ESLint 中所有的核心规则。这些规则可以在 ESLint 的任何版本进行更改，因此不推荐在产品中使用，因为它随着 ESLint 版本进行更改。使用的话，请自己承担风险。

3. rules

   当eslint插件没有指定风格时，我们可以基于rules完全自定义一套风格，当某个风格的单个规则不满足需求，在rules中重新设置便可覆盖。

小技巧

1. 如何让prettier的规则当做eslint规则使用
   eslint配置文件中增加红框中的两个内容，重启项目生效
   

填坑

1. 安装eslint-plugin-prettier插件比较特殊，需要同时安装eslint-config-prettier，后者会关闭eslint中所有不必要或可能与Prettier冲突的规则，进入源码查看一下就明白了，但我没有搞明白的一点，到底是在哪里使用的eslint-config-prettier