VSCode怎么设置保存时排序import_VSCode如何自动整理和排列导入语句顺序【技巧】-VSCode-PHP中文网

推荐用eslint + eslint-plugin-import的import/order规则配合codeactionsonsave自动排序import，需正确配置插件、规则和vscode设置，确保链路完整。

vscode怎么设置保存时排序import_vscode如何自动整理和排列导入语句顺序【技巧】

VSCode保存时自动排序import用哪个扩展

ESLint和Prettier本身不负责import排序，得靠专门的工具。核心是用 import-sort 配合 import-sort-cli，再通过 VSCode 的 editor.codeActionsOnSave 触发。别装“Auto Import”或“JavaScript Booster”这类名字带“auto”的插件——它们多数只管补全，不管排序顺序。

import-sort 是实际干活的库，支持多种风格（如 eslint-import-resolver-node 或 webpack 解析逻辑）
必须配 .importsortrc 或 importSort 字段在 package.json 里，否则默认行为是“不动”
VSCode 插件 Import Sorter（作者：remimarsal）已停更，现在推荐直接用 ESLint + eslint-plugin-import 的 sort-imports 规则 + 保存时修复

怎么让保存时真正触发import排序

关键不是装了插件就完事，而是 VSCode 要知道“该调谁、怎么调”。最稳的方式是走 ESLint 的 fix on save 流程：

在工作区设置里打开 settings.json，加这两项：

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

确保项目里有 eslint-plugin-import，并在 .eslintrc.js 中启用规则：

rules: {
  "import/order": ["error", {
    "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
    "pathGroups": [...],
    "alphabetize": { "order": "asc", "caseInsensitive": true }
  }]
}

不要勾选 VSCode 设置里的 “Format on Save”，它调的是格式化器（如 Prettier），对 import 顺序无效

为什么改了配置还是不排序

常见卡点不在代码，而在环境链路断了：

VSCode

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

下载

eslint-plugin-import 没安装到本地 node_modules（全局装不行）
项目根目录没有 eslint.config.js 或 .eslintrc.*，VSCode 找不到规则上下文
文件没被 ESLint 识别为 JS/TS（比如后缀是 .jsx 但 eslint.validate 没列进去）
import/order 规则设成了 "warn" 而非 "error"，ESLint 保存时不自动 fix
TypeScript 项目用了 typescript-eslint，但没在 parserOptions.project 指定 tsconfig.json 路径，导致路径解析失败，import 分组全乱

排序规则里 pathGroups 怎么写才不踩坑

pathGroups 是手动干预分组顺序的唯一出口，但写错会导致整个 import/order 失效：

每个 group 必须有 pattern 和 group，pattern 是正则字符串（不用写 /.../），比如 "^@components/"
group 值必须是预设组之一："builtin"、"external"、"internal" 等，不能自定义新组名
position: "before" 或 "after" 控制插入位置，但只对匹配到的路径生效，不影响其他 import 行
正则注意转义：Windows 路径 "^src\utils\.<em>"</em> 要双反斜杠，Mac/Linux 用 "^src/utils/." 即可