建议配合 「完全理解」如何统一项目中的代码风格 一起阅读

当需要给项目添加 ESLint、stylelint 的时候，我们通常的做法是 google => copy => paste 。或者最多也就自己调整一下 rules

其实这些配置文件并没有很复杂，只需要区分 rules、extends 和 plugins 的区别即可

// .eslintrc.js
module.exports = {
  //...
  extends: [],
  plugins: [],
  rules: {},
  //...
};

// .stylelintrc.js
module.exports = {
  //...
  extends: [],
  plugins: [],
  rules: {},
  //...
};

一、rules

rules 是最容易理解的概念。安装 lint 工具的基本目的，就是对代码进行各种限定，统一风格。因为每个人、每个团队追求的风格不同，所以工具也会提供各种配置，帮助限定代码

ESLint 

eslint.org/docs/rules/

• 强制使用反引号，双引号或单引号的一致使用
• 在块之前强制保持一致的间距

// .eslintrc.js
module.exports = {
  //...
  extends: [],
  plugins: [],
  rules: {
    'quotes': 'single',
    'space-before-blocks': 'always',
  },
  //...
};

stylelint

stylelint.io/user-guide/…

• 禁止使用无效的十六进制颜色。
• 在功能的逗号后面需要换行符或禁止使用空格

// .stylelintrc.js
module.exports = {
  //...
  extends: [],
  plugins: [],
  rules: {
    'color-no-invalid-hex': true,
    'function-comma-newline-after': 'always-multi-line',
  },
  //...
};

这些都属于 rule，可以在 rules 中配置

二、extends

对于不同项目，如果希望使用相同的 rules，直接复制粘贴显然不是一个好方法，一是 rules 太多，配置文件会显得很乱，二是无法同步更新。

推荐使用的方法是把所需的 rules 抽离成一个 npm 包，需要的时候再通过 extends 引用。而且对于这些抽离出来的包，有着统一的命名规范

ESLint

eslint.org/docs/develo…

extends 的模块名称以 eslint-config- 开头，例如 eslint-config-myconfig 也支持 npm 作用域模块。例如 @scope/eslint-config 或 @scope/eslint-config-myconfig）

使用的时候可以用全称，也可以用缩写

// .eslintrc.js
module.exports = {
  //...
  extends: [
    'eslint-config-myconfig', // 全称
//  'myconfig'                   缩写
  ], 
  plugins: [],
  rules: {
    'quotes': 'single',
    'space-before-blocks': 'always',
  },
  //...
};

stylelint

stylelint.io/user-guide/…

没有找到文档说明 stylelint 对 extends 模块的名称有规范，不过现有使用量较多、官方的 npm 包命名方式与 eslint 类似。使用 stylelint-config- 开头

应为没有明文规范，所以使用时必须用全称

// .stylelintrc.js
module.exports = {
  //...
  extends: ['stylelint-config-myconfig'],
  plugins: [],
  rules: {
    'color-no-invalid-hex': true,
    'function-comma-newline-after': 'always-multi-line',
  },
  //...
};

优先级

允许 extends 多个模块，如果规则冲突，位置靠后的包将覆盖前面的。rules 中的规则相同，并且优先级恒定高于 extends

三、plugins

虽然官方提供了很多规则，但是总有覆盖不到的情况。这时候可以使用 plugin 定义自己的规则

ESLint

eslint.org/docs/develo… 与 extends 类似的命名规则，把 config 替换成 plugin 即可。例如：eslint-plugin-myplugin 

同样可以使用缩写。引入 plugin 可以理解为引入了额外的 rules，需要在 rules、extends 中定义后才会生效

// .eslintrc.js
module.exports = {
  //...
  extends: [
    'eslint-config-myconfig',    // 全称
//  'myconfig'                      缩写
    'plugin:myplugin/recommended'// 插件中的 extends
  ], 
  plugins: ['myplugin'],
  rules: {
    'quotes': 'single',
    'space-before-blocks': 'always',
    'myplugin/hello': true      //  自定义插件规则
  },
  //...
};

stylelint

同样没有明文的命名规范，常见 plugin 命名规则为 stylelint-myplugin

使用方法和 ESLint plugins 类似

// .stylelintrc.js
module.exports = {
  //...
  extends: ['stylelint-config-myconfig'],
  plugins: ['stylelint-myplugin'],
  rules: {
    'color-no-invalid-hex': true,
    'function-comma-newline-after': 'always-multi-line',
    'stylelint-myplugi/hello': true
  },
  //...
};

迁就 Prettier

如果不清楚为什么要使用 Prettier，以及代码风格中 Format 和 Source 的定义，请先阅读「如何统一项目中的代码风格」

有两种方法避免 rules 与 Prettier 产生冲突

extends

第一种方法是对于 Prettier 中所有的配置，ESLint 都进行避让。举个例子：Prettier 可以设置是否每句话后面都加分号。ESLint 进行避让的方法是不检查，也就是加或者不加都不报错，完全不校验

这样就完美的避免了与 Prettier 无论怎么设置，都不会发生冲突。官方有推荐的对应 extends 包

yarn add eslint-config-prettier -D

// .eslintrc.js
module.exports = {
  //...
  extends: ['prettier'],
  plugins: [],
  rules: {},
  //...
};

stylelint 类似

yarn add stylelint-config-prettier -D

// .stylelintrc.js
module.exports = {
  //...
  extends: ['stylelint-config-prettier'],
  plugins: [],
  rules: {},
  //...
};

这样设置之后，编译器以及控制台中不会报错。保存（如果设置了自动格式化）或者执行命令行格式化的时候，会将代码按 Prettier 的配置 format

plugins

有的同学可能受不了格式错误不提示，所以希望在控制台里看到对应的标红，在控制台里看到编译失败、警告。这时候就可以使用 plugins

yarn add eslint-plugin-prettier

// .eslintrc.js
module.exports = {
  //...
  extends: [],
  plugins: ['prettier'],
  rules: {
    "prettier/prettier": "error",
  },
  //...
};

这样就可以清晰的看到格式问题了

stylelint 类似

yarn add stylelint-prettier -D

// .stylelintrc.js
module.exports = {
  //...
  extends: [],
  plugins: ['stylelint-prettier'],
  rules: {
     "prettier/prettier": true
  },
  //...
};

prettier

还有人实在受不了 prettier 规定的某些 js Format，想用 ESLint 工具里的。这时候可以安装 prettier-eslint 。工具作用是先 prettier --write ，再 ESLint --fix。这样就能满足需求了，这种工具一般以 prettier-为开头命名。

附录：

yangshun: Comparison between tools that allow you to use ESLint and Prettier together.

	prettier-eslint	eslint-plugin-prettier	eslint-config-prettier
What it is	A JavaScript module exporting a single function.	An ESLint plugin.	An ESLint configuration.
What it does	Runs the code (string) through prettier then eslint --fix. The output is also a string.	Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output.	This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb.
How to use it	Either calling the function in your code or via prettier-eslint-cli if you prefer the command line.	Add it to your .eslintrc.	Add it to your .eslintrc.
Is the final output Prettier compliant?	Depends on your ESLint config	Yes	Yes
Do you need to run prettier command separately?	No	No	Yes
Do you need to use anything else?	No	You may want to turn off conflicting rules using eslint-config-prettier.	No