VSCode中simple-import-sort排序保存后还原的问题排查

问题现象 #

• 全局执行 eslint --ext .tsx,.ts . --fix 可正常修复所有文件的导入排序
• 在2024年9月5日最新版VSCode中，手动保存某特定文件时，已排好序的导入会被还原，同时界面闪烁并弹出报错：Run autofix to sort these imports!eslint(simple-import-sort/imports)
• 仅关闭 simple-import-sort/imports 规则可消除问题，但希望保留自动修复导入排序功能
• 已多次重启VSCode，问题仍存在

可能成因 #

1. 工具执行顺序/冲突：VSCode自带的organizeImports功能、Prettier等格式化工具，与ESLint的simple-import-sort规则存在冲突。保存时其他工具先修改了导入顺序，ESLint校验后发现不符合规则报错；或两者执行顺序导致互相覆盖结果。
2. VSCode ESLint插件配置问题：保存时未正确触发ESLint自动修复，或修复时机晚于其他格式化操作。
3. 特定文件导入语法特殊：文件中存在import type、动态导入等特殊语法，导致simple-import-sort的排序逻辑与其他工具处理结果不一致。
4. 依赖版本不兼容：eslint、@typescript-eslint、eslint-plugin-simple-import-sort等依赖版本不匹配，导致插件运行异常。

解决方案 #

1. 调整VSCode保存时的动作优先级 #

修改.vscode/settings.json，禁用自带的导入排序，确保ESLint自动修复优先执行：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": false
  },
  "editor.formatOnSave": false, // 若使用Prettier，先临时禁用排查冲突
  "eslint.validate": ["typescript", "typescriptreact"]
}

如果需要保留Prettier，可配置Prettier不处理导入排序（在.prettierrc中添加"importOrder": []，或使用prettier-plugin-simple-import-sort对齐规则）。

2. 明确simple-import-sort分组规则 #

在.eslintrc.json中自定义导入分组，避免与其他工具的排序逻辑冲突：

{
  "plugins": ["simple-import-sort"],
  "rules": {
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // 第三方库（如react、lodash）
          ["^[^./]"],
          // 类型导入单独分组
          ["^type.*", "^import type"],
          // 项目内部绝对路径（如@/components）
          ["^@/"],
          // 相对路径导入
          ["^\\./", "^\\.\\./"]
        ]
      }
    ],
    "simple-import-sort/exports": "error"
  }
}

3. 排查特定文件的导入内容 #

检查报错文件中的导入语法：

• 确认是否存在未被simple-import-sort正确识别的导入（如带注释的导入、动态导入）
• 更新eslint-plugin-simple-import-sort到最新版本，确保对TS语法的支持：

  npm update eslint-plugin-simple-import-sort --save-dev
  

4. 重置VSCode插件配置 #

通过Ctrl+Shift+P打开命令面板，执行ESLint: Restart ESLint Server和Developer: Reload Window，确保插件正确读取最新配置。

5. 对齐依赖版本 #

确保项目中ESLint相关依赖版本匹配，可参考以下版本组合（2024年9月）：

{
  "devDependencies": {
    "eslint": "^8.57.0",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "eslint-plugin-simple-import-sort": "^10.0.0"
  }
}

附上的配置示例 #

.eslintrc.json #

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "react", "simple-import-sort"],
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  }
}

.vscode/settings.json #

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": ["typescript", "typescriptreact"]
}

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