eslint配置文件_Lint 配置文件中 extends、plugins 的区别

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

当需要给项目添加 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

https://eslint.org/docs/rules/

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

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

stylelint

https://stylelint.io/user-guide/rules/list

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

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