VSCode中保存index.ts时ESLint未自动排序格式化的问题排查

嘿，我来帮你拆解下这个问题：

为什么import会被调整但不是纯字母序？ #

首先要纠正一个误解：ESLint本身没有默认的import排序规则，你看到的自动调整肯定是项目里启用了第三方ESLint插件的规则（最常见的是eslint-plugin-import的import/order规则，或者eslint-plugin-simple-import-sort的排序规则）。这类规则通常不是按纯字母排序，而是按模块类型分组排序——比如先排Node.js内置模块（像fs、path），再排第三方依赖（像react、lodash），最后排本地文件（像./utils、../components），每组内部再按字母排序，所以看起来会和纯字母序不一样，这是正常的。

为什么export完全不自动排序？ #

这是因为绝大多数ESLint插件默认不处理export排序，包括常用的eslint-plugin-import也只专注于import相关规则。你的index.ts里的export没被自动排序，本质是没有启用对应的ESLint规则，和VSCode配置无关——你现有的VSCode配置已经正确开启了ESLint自动修复，问题出在ESLint的规则配置上。

解决export排序的步骤 #

要让export也能自动排序，你需要做这几件事：

1. 安装支持export排序的ESLint插件 #

推荐用eslint-plugin-simple-import-sort，它同时支持import和export排序，配置简单：

npm install eslint-plugin-simple-import-sort --save-dev
# 或者用yarn/pnpm
yarn add eslint-plugin-simple-import-sort --dev

2. 在ESLint配置文件（.eslintrc.js/.eslintrc.json等）里启用规则 #

把原来的import排序规则替换成这个插件的规则，同时添加export排序规则：

{
  "plugins": ["simple-import-sort"],
  "rules": {
    // 禁用原来的import排序规则（如果有的话）
    "import/order": "off",
    "sort-imports": "off",
    // 启用import排序
    "simple-import-sort/imports": "error",
    // 启用export排序
    "simple-import-sort/exports": "error"
  }
}

3. 验证配置是否生效 #

保存index.ts文件，ESLint就会自动帮你排序export语句了。如果还是没效果，检查：

• 你的index.ts有没有被.eslintignore排除
• ESLint配置文件有没有正确加载（可以在VSCode的ESLint控制台查看日志）

关于VSCode配置的补充 #

你现有的VSCode配置是完全没问题的：

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.enable": true,
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
]

不需要额外修改VSCode设置，核心是完善ESLint的规则配置。

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