VSCode中ESLint与Prettier保存格式化效果被撤销问题排查

我之前通过配置files.eol解决了Windows与iOS系统的换行符问题，但现在保存文件时，部分代码检查的修复效果会被撤销，现象如动图所示。以下是我的工作区及代码检查配置文件，请问是什么导致了该冲突？

配置文件：.eslintrc.js #

module.exports = {
  root: true,
  extends: '@react-native-community',
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'unused-imports'],
  overrides: [
    {
      files: ['*.ts', '*.tsx', '*.js'],
      rules: {
        'prettier/prettier': [
          'error',
          {
            endOfLine: 'auto',
          },
        ],
        '@typescript-eslint/no-shadow': ['error'],
        'no-shadow': 'off',
        'no-undef': 'off',
        'no-console': 'warn',
        '@typescript-eslint/no-unused-vars': 'off',
        'react/no-unstable-nested-components': ['warn', {allowAsProps: true}],
        'unused-imports/no-unused-imports': 'error',
        'unused-imports/no-unused-vars': [
          'warn',
          {
            vars: 'all',
            varsIgnorePattern: '^_',
            args: 'after-used',
            argsIgnorePattern: '^_',
          },
        ],
      },
    },
  ],
};

配置文件：.prettierrc.js #

module.exports = {
  bracketSpacing: false,
  bracketSameLine: true,
  singleQuote: true,
  trailingComma: "all",
  arrowParens: "avoid",
};

配置文件：myproject.code-workspace #

{
  "folders": [
    {
      "path": "."
    }
  ],
  "settings": {
    "compilerOptions": {
      "baseUrl": "",
      "paths": {
        "lib/*": ["src/lib/*"]
      }
    },
    "editor.formatOnSave": true,
    "editor.rulers": [],
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "tailwindCSS.experimental.classRegex": [
      "tw`([^`]*)" , // tw`...`
      "tw=\"([^\"]*)" , // <div tw="..." />
      "tw={\"([^\"]}*)" , // <div tw={"..."} />
      "tw\\.\\w+`([^`]*)" , // tw.xxx`...`
      "tw\\(.*?\\)`([^`]*)"  // tw(Component)`...`
    ],
    "eslint.format.enable": true,
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact"
    ],
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  },
  "extensions": {
    "recommendations": [
      "mikestead.dotenv",
      "dsznajder.es7-react-js-snippets",
      "eamodio.gitlens",
      "dbaeumer.vscode-eslint",
      "austenc.tailwind-docs",
      "esbenp.prettier-vscode",
      "adpyke.codesnap"
    ]
  }
}

冲突原因分析 #

这个问题是ESLint 和 Prettier 在保存时的规则冲突与执行顺序问题导致的，具体点如下：

1. 换行符配置不统一：

   • ESLint 中通过prettier/prettier规则设置了endOfLine: 'auto'，会根据当前系统自动适配换行符；
   • 但 Prettier 配置文件中未明确指定endOfLine，它会默认读取编辑器的files.eol或系统换行符。这就导致 ESLint 修复换行符后，Prettier 又将其改回，或者反之，形成循环覆盖。

2. 保存操作的执行顺序冲突：

   • 你同时开启了editor.formatOnSave（Prettier 格式化）和editor.codeActionsOnSave.source.fixAll.eslint（ESLint 修复），VS Code 中这两个操作的执行顺序可能并行或有先后。如果 ESLint 先修复了代码问题，Prettier 格式化时又覆盖了部分修复结果（比如换行符、缩进），就会出现“修复效果被撤销”的现象。

3. 冗余格式化逻辑重叠：

   • 你设置了eslint.format.enable: true，同时又把 Prettier 设为默认格式化工具，两种格式化逻辑同时作用于文件，规则不一致的地方就会互相覆盖。

解决建议 #

• 统一换行符配置：在.prettierrc.js中明确添加endOfLine: 'auto'（与 ESLint 保持一致），或根据团队需求设置为lf/crlf，确保两者规则统一：

  module.exports = {
    // 原有配置...
    endOfLine: 'auto'
  };
  

• 集成 ESLint 与 Prettier：使用eslint-config-prettier和eslint-plugin-prettier让 ESLint 直接集成 Prettier 规则，避免重复格式化：

  1. 安装依赖：npm install eslint-config-prettier eslint-plugin-prettier --save-dev
  2. 修改.eslintrc.js：

     module.exports = {
       root: true,
       extends: [
         '@react-native-community',
         'plugin:prettier/recommended' // 添加该行
       ],
       // 原有配置...
     };
     

  3. 关闭editor.formatOnSave，只保留source.fixAll.eslint，让 ESLint 统一处理修复与格式化。

• 关闭冗余配置：如果采用 ESLint 集成 Prettier 的方案，将eslint.format.enable设为false，避免重复操作。

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