Prettier导入排序保存正常但ESLint报错，配置冲突排查

核心问题 #

你的配置存在两个关键问题：Prettier导入排序规则的语法错误与逻辑混乱，以及ESLint与Prettier的导入排序规则冲突。

1. Prettier配置的错误点 #

• 占位符转义错误：你写的<THIRD_PARTY_MODULES>是HTML转义字符，Prettier无法识别这个第三方模块的占位符，必须直接写<THIRD_PARTY_MODULES>。
• 规则顺序与逻辑重叠：
  • 你定义的^src/(.*)$、^(.*)/(?!generated)(.*)/(.*)$等规则顺序混乱，且和最后的^[./]（相对路径规则）存在匹配重叠，导致Prettier无法正确判断导入归属，出现排序反复的问题。
  • 你的目标顺序是react开头导入 → 第三方模块 → 本地相对路径模块，但当前规则把本地绝对路径（src/）放在第三方模块之后，还插入了generated相关规则，和示例中的导入结构不匹配。

2. ESLint与Prettier的冲突 #

你之前使用eslint-plugin-import管理导入排序，现在切换到Prettier的导入排序，但没有禁用ESLint中eslint-plugin-import的相关规则，导致两者的排序逻辑互相覆盖，出现自动保存时反复切换顺序的情况。

修正后的配置 #

调整Prettier配置（.prettierrc.js） #

按照你的目标顺序重新整理规则，去掉不必要的冗余规则：

module.exports = {
  arrowParens: 'avoid',
  singleQuote: true,
  trailingComma: 'all',
  // 导入排序配置
  importOrderSeparation: false,
  importOrderSortSpecifiers: true,
  importOrderCaseInsensitive: true,
  importOrder: [
    '^react(.*)$', // 所有react相关导入排在最前
    '<THIRD_PARTY_MODULES>', // 第三方模块（包括@gorhom这类scope包）
    '^[./]', // 本地相对路径模块（../../、../、./开头的导入）
  ],
};

如果需要区分本地绝对路径（比如src/开头的导入）和相对路径，可以在第三方模块后添加对应规则，调整为：

importOrder: [
  '^react(.*)$',
  '<THIRD_PARTY_MODULES>',
  '^src/(.*)$', // 本地绝对路径导入
  '^[./]', // 本地相对路径导入
],

调整ESLint配置（.eslintrc.js） #

禁用eslint-plugin-import中与导入排序相关的规则，避免和Prettier冲突：

module.exports = {
  root: true,
  extends: ['@react-native-community', 'prettier'],
  rules: {
    // Eslint rules:
    'space-in-brackets': 0,
    'prettier/prettier': [1],

    // 禁用eslint-plugin-import的导入排序规则
    'import/order': 0,
    'import/first': 0,
    'import/newline-after-import': 0,

    // React rules:
    'react-hooks/exhaustive-deps': 0,

    // React native community overrides:
    'react-native/no-inline-styles': 0,

    // Typescript rules:
    '@typescript-eslint/no-unused-vars': [1],
    '@typescript-eslint/no-shadow': 0,
  },
};

验证效果 #

修正后，你的示例导入块会被Prettier正确识别并保持你想要的顺序，同时ESLint不再会因为导入排序和Prettier产生冲突，自动保存时的闪烁问题也会解决。

内容的提问来源于stack exchange，提问作者Seth Lutske