ESLint配置extends继承后自定义规则不生效怎么办？

这个问题挺常见的，我们来一步步排查。

先看你的配置：

module.exports = {

  extends: ['airbnb'],

  rules: {

    'indent': ['error', 2],

    'quotes': ['error', 'single']

  }

};

**先说结论**：你的配置本身没问题，但很可能被编辑器的默认设置覆盖了。

### 第一步：确认ESLint是否真的生效
先验证ESLint是否在项目中正常运行：

npx eslint --ext .js src/

如果报错说明ESLint本身没问题，否则可能是整个ESLint都没跑起来。

### 第二步：检查编辑器插件配置
你提到"引号"不生效，这很可能是因为你用的是 VSCode，它默认有自己的引号自动修复逻辑。

#### VSCode 用户应该加这个配置：
在 .vscode/settings.json 加：

{

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  },

  "eslint.validate": ["javascript", "javascriptreact"],

  "javascript.format.enable": false,

  "editor.defaultFormatter": "dbaeumer.vscode-eslint"

}

> 这一步原理是让VSCode优先使用ESLint的格式规则，而不是Prettier或其他默认格式化工具。

### 第三步：检查是否有冲突的配置文件
确认项目中没有其他配置文件干扰，比如：
- .eslintrc
- .eslintrc.json
- .prettierrc
- package.json 里有没有 eslintConfig 字段

### 第四步：检查airbnb是否引入了react等子规则
如果你项目里用了React，建议这样写：

module.exports = {

  extends: ['airbnb', 'airbnb/hooks'],

  rules: {

    'indent': ['error', 2],

    'quotes': ['error', 'single']

  }

};

如果是React Native：

module.exports = {

  extends: ['airbnb', 'airbnb/hooks', 'plugin:react-native/all'],

  rules: {

    'indent': ['error', 2],

    'quotes': ['error', 'single']

  }

};

### 第五步：验证规则是否被覆盖
有些规则可能在 extends 的配置里被覆盖了。你可以用下面这个技巧来调试：

module.exports = {

  extends: ['airbnb'],

  rules: {

    'indent': ['error', 2],

    'quotes': ['error', 'single']

  },

  overrides: [

    {

      files: ['*.js'],

      rules: {

        'quotes': ['error', 'single'] // 强制覆盖

      }

    }

  ]

};

### 最后：重启编辑器
有时候VSCode需要完全重启才能加载新的ESLint配置，特别是修改了 .vscode/settings.json 后。

### 总结
你的ESLint配置本身没问题，问题大概率出在：
1. 编辑器插件配置
2. 其他格式化工具冲突
3. 多个ESLint配置文件共存

你先按上面步骤排查下，如果还有问题可以贴下 package.json 和 .vscode/settings.json 内容，我再帮你看看。

这问题我遇到过，确实是继承和规则覆盖的顺序搞错了。你现在的配置里，extends在前，rules在后，理论上是没问题的，但有时候插件加载顺序会出幺蛾子。

直接给你个靠谱的解决方案：把extends和rules换个位置试试。

module.exports = {

  rules: {

    'indent': ['error', 2],

    'quotes': ['error', 'single']

  },

  extends: ['airbnb']

};

这样写能确保你的自定义规则优先被解析，然后再应用airbnb的基础规则。如果还是不行，可能是插件版本的问题，试着更新一下eslint-config-airbnb和eslint的版本。

说实话，这类问题真的很蛋疼，经常是因为插件内部实现的细节导致的。折腾几次就熟悉套路了。