如何设置VSCode自动导入排序-VSCode-PHP中文网

vscode的source.organizeimports不按字母序排，因其仅删未用项、合并重复项、按内置分组（builtin→external→relative）粗略排序，组内不执行字母升序；真·字母序需eslint的import/order规则+source.fixall.eslint修复链。

如何设置vscode自动导入排序

VSCode 本身不自动排序 import，必须明确选择一种排序机制并配齐整条链路——否则保存时什么都不会发生。

为什么 `source.organizeImports` 不按字母序排？

TypeScript 内置的 organizeImports 只做三件事：删未使用项、合并重复项、按“内置分组”（如 builtin → external → relative）粗略排序，不支持字母升序。它把 import { a } from 'vue' 和 import { b } from 'react' 放同一组里，但不会在组内再按 a、b 排。

想严格字母序 → 必须走 ESLint 的 import/order 规则 + source.fixAll.eslint
想保留分组逻辑（比如把 @/ 路径单独提前列）→ 用 import-sort 配 .importsortrc
只想要基础整理（去重+空行+分组），不care字母序 → source.organizeImports 开箱即用，但需确保 TS/JS 语言服务已激活

ESLint 方案：真·字母序，但配置链最脆弱

这是目前唯一能稳定实现“每个 import 行按模块名纯字母升序”的方式，但每环都可能断：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

项目本地必须装 eslint-plugin-import（全局安装无效）

.eslintrc.js 或 eslint.config.mjs 中要写：

"import/order": ["error", { "alphabetize": { "order": "asc", "caseInsensitive": true } }]

VSCode 设置里禁用 source.organizeImports，改用：

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

检查 eslint.validate 是否包含当前文件类型，例如 typescriptreact 文件必须显式列出，不能只写 typescript
TS 项目还要确认 parserOptions.project 指向正确的 tsconfig.json，否则路径解析失败，分组错乱，字母序也就没意义了

Import-sort 方案：分组灵活，但不处理字母序细节

它适合需要语义化分组（如 react 在顶、@myorg/ 次之、./ 在底）的团队，但组内仍是原始顺序或简单字母序，不支持 alphabetize.caseInsensitive 这类精细控制：

本地安装：npm install --save-dev import-sort import-sort-parser-typescript

根目录放 .importsortrc，内容类似：

{
  "parser": "typescript",
  "style": "webpack",
  "groups": [
    ["^react", "^@?\w"],
    ["^@myorg/", "^@types/"],
    ["^\./", "^\.{1,2}/"]
  ]
}

VSCode 设置启用："source.organizeImports": true（注意：不是 fixAll.eslint）
关键卡点：如果文件右下角显示的是 Plain Text 或 JavaScript React 但没 jsconfig.json，organizeImports 根本不会触发