Prettier格式化代码后仍被ESLint标记不合规，求配置排查方案

你遇到的问题核心是ESLint与Prettier的配置冲突，或是存在多份Prettier配置导致格式化行为不一致，以下是具体排查和修复步骤：

1. 排查多份Prettier配置文件 #

检查项目根目录下是否存在单独的.prettierrc、.prettierrc.json或prettier.config.js文件。如果有，Prettier会优先使用这些文件的配置，而非ESLint中prettier/prettier规则里的配置，这就会导致格式化后的代码不符合ESLint的Prettier规则校验。

如果存在这类文件，要么删除它，要么让它的配置和ESLint中prettier/prettier的配置完全一致。

2. 修正ESLint配置 #

你的ESLint配置缺少关键扩展项，且存在可能冲突的规则，修改如下：

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  settings: {
    'import/resolver': {
      'typescript': {}
    }
  },
  extends: [
    'plugin:prettier/recommended', // 替换原有的'prettier'，自动关闭与Prettier冲突的ESLint规则并启用prettier校验
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: true,
    tsconfigRootDir: __dirname,
  },
  plugins: ['react-refresh', 'prettier'],
  rules: {
    // 关闭max-len规则，交给Prettier的printWidth处理，避免规则冲突
    'max-len': 'off',
    'prettier/prettier': [
      'error',
      {
        printWidth: 120,
        tabWidth: 2,
        useTabs: false,
        semi: false,
        singleQuote: true,
        quoteProps: 'as-needed',
        jsxSingleQuote: false,
        trailingComma: 'all',
        bracketSpacing: true,
        bracketSameLine: false,
        jsxBracketSameLine: false,
        arrowParens: 'avoid',
        requirePragma: false,
        insertPragma: false,
        proseWrap: 'preserve',
        htmlWhitespaceSensitivity: 'ignore',
        endOfLine: 'lf',
        singleAttributePerLine: true,
      }
    ],
    'no-confusing-arrow': 'off',
    'arrow-body-style': 'off',
    'prefer-arrow-callback': 'off',
  },
}

关键修改说明： #

• 将extends中的prettier替换为plugin:prettier/recommended：这个扩展会自动关闭所有与Prettier格式化逻辑冲突的ESLint内置规则，确保ESLint只校验Prettier的规则，避免双重校验冲突。
• 关闭max-len规则：Prettier的printWidth已经负责控制代码行长度，保留ESLint的max-len会导致两者逻辑冲突（比如Prettier认为换行符合要求，但ESLint的max-len可能判定违规）。

3. 验证修复效果 #

修改配置后，执行以下步骤：

1. 清除ESLint缓存：运行npx eslint --cache-clear
2. 重新格式化代码：运行npx prettier --write .或通过编辑器的格式化命令
3. 执行ESLint校验：运行npx eslint .

此时应该不会再出现格式化后反而被标记违规的情况。

针对你遇到的两个具体问题的解释： #

• 联合类型换行问题：如果原始代码行长度未超过120，Prettier会保持一行；如果超过则会换行。之前的冲突是因为实际生效的Prettier配置（比如单独配置文件的printWidth更大）和ESLint中配置不一致，导致格式化后的代码不符合ESLint的校验规则。
• 箭头函数换行问题：同样是配置不一致导致Prettier格式化时换行，但ESLint期望不换行，修正配置后两者行为统一即可解决。

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