VSCode自动保存时缩进冲突问题（Eslint/Prettier环境）

你在VSCode中配置了ESLint和Prettier的TypeScript项目，多数文件正常，但少数TS文件自动保存时会出现「先添加缩进、随后立即移除」的冲突现象，这大概率是ESLint原生缩进规则与TypeScript专属缩进规则冲突，或是格式化工具执行顺序导致的互相覆盖。

核心冲突点 #

你的ESLint配置中同时启用了原生indent规则和@typescript-eslint/strict预设，而@typescript-eslint/strict中已经包含了@typescript-eslint/indent规则——这两个规则对TypeScript语法（比如类型注解、泛型、TSX元素）的缩进判断逻辑不一致，修复时会互相抵消，就出现了保存时缩进反复横跳的现象。

另外你的Prettier配置未明确指定tabWidth，虽然默认是2，但建议显式配置避免潜在的规则歧义。

解决方案 #

1. 替换ESLint原生indent规则为TS专属规则 #

修改.eslintrc.js中的rules部分，删除原生indent规则，改用@typescript-eslint/indent：

rules: {
  // 移除原生indent规则
  // indent: ['error', 2, {SwitchCase: 1}],
  '@typescript-eslint/indent': ['error', 2, {SwitchCase: 1}],
  'linebreak-style': ['error', 'unix'],
  quotes: ['error', 'single', {avoidEscape: true}],
  semi: ['error', 'always'],
},

2. 显式配置Prettier的缩进参数 #

修改.prettierrc.js，添加tabWidth确保和ESLint规则一致：

module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: true,
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: 'all',
  tabWidth: 2, // 显式指定缩进宽度
};

3. 调整VSCode保存时的工具执行顺序 #

在项目的.vscode/settings.json中，确保工具执行顺序合理，避免互相覆盖：

{
  "settings": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "typescript.tsserver.experimental.enableProjectDiagnostics": true,
    "editor.codeActionsOnSaveTimeout": 1000,
    "editor.formatOnSaveMode": "file"
  }
}

4. 检查异常文件的特殊语法 #

如果上述操作后还有少数文件异常，检查这些文件是否包含特殊TS语法：比如嵌套泛型、复杂类型断言、JSX混合TS注解等。可以临时禁用该文件的ESLint缩进规则排查：

// eslint-disable-next-line @typescript-eslint/indent
const foo = <T>(bar: T) => { /* ... */ };

内容的提问来源于stack exchange，提问作者Gaylord.P