编译时出现@typescript-eslint配置冲突问题，求解决方案

错误信息 #

"@typescript-eslint" was conflicted between ".eslintrc.js" and ".eslintrc.js » @react-native-community/eslint-config#overrides[1]"

当前ESLint配置 #

module.exports = {
  root: true,
  extends: ['@react-native-community', 'plugin:storybook/recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  overrides: [{
    files: ['*.ts', '*.tsx'],
    rules: {
      '@typescript-eslint/no-shadow': ['error'],
      'no-shadow': 'off',
      'no-undef': 'off'
    }
  }]
};

修复方案 #

• 方案1：移除重复配置并调整extends顺序
  @react-native-community/eslint-config已经内置了@typescript-eslint的parser和plugin配置，手动重复添加会触发冲突。修改后的配置如下：

module.exports = {
  root: true,
  // 将storybook配置前置，让社区配置覆盖基础规则
  extends: ['plugin:storybook/recommended', '@react-native-community'],
  overrides: [{
    files: ['*.ts', '*.tsx'],
    rules: {
      '@typescript-eslint/no-shadow': ['error'],
      'no-shadow': 'off',
      'no-undef': 'off'
    }
  }]
};

• 方案2：覆盖社区配置中的typescript override
  如果需要保留自定义的parser和plugin配置，可以通过添加空规则块覆盖社区配置中冲突的override：

module.exports = {
  root: true,
  extends: ['@react-native-community', 'plugin:storybook/recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        '@typescript-eslint/no-shadow': ['error'],
        'no-shadow': 'off',
        'no-undef': 'off'
      }
    },
    // 禁用社区配置中引发冲突的第二个override
    {
      files: ['*.ts', '*.tsx'],
      rules: {}
    }
  ]
};

• 方案3：统一@typescript-eslint依赖版本
  若冲突由版本不一致导致，执行命令统一相关依赖版本：

# npm
npm install @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --save-dev

# yarn
yarn add @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --dev

内容的提问来源于stack exchange，提问作者Fateh achouri