import order 排序规则

https://github.com/lydell/eslint-plugin-simple-import-sort/

vscode 用的是什么规则呢？

当我们按下 Shift + Alt + O 的时候，vscode 在做什么？ 关键字是 "source.organizeImports"

vscode 快捷键的位置: extensions/typescript-language-features/src/languageFeatures/organizeImports.ts

可以看到该文件 语言客户端将去通知做 organizeImports 的动作。

https://github.dev/microsoft/vscode-languageserver-node/blob/main/testbed/server/src/server.ts#L139

语言服务器收到 organizeImports 命令 - converts tsserver response to lsp code actions

https://github.dev/typescript-language-server/typescript-language-server/blob/master/src/organize-imports.ts#L14

将给到对应的语言服务，回到 typescript.

https://github.dev/microsoft/TypeScript/blob/main/lib/tsserver.js#L143307

这里它做了三件事：

• 移除不用的 import
• 合并相同的来源的 import
• 对 import 排序

所以能不能配置 eslint 与 organize imports 命令一致？

不能。社区有相关讨论和实现，但没有合并到主分支。但 prettier + 插件可以做到。

https://github.com/typescript-eslint/typescript-eslint/pull/256 https://github.com/typescript-eslint/typescript-eslint/pull/1239/files#diff-38c8fc0c47e5c17c00ea63a15e64bc8bdcd620507aa95f7f2f8feb1cda572b55

最佳实践是什么

1. eslint + eslint-config-perttier + prettier-plugin-organize-imports
2. 使用 simple order import

参考:

• https://community.vscodetips.com/tonyhicks20/automatically-organize-imports-346d
• https://waltyou.github.io/Language-Server-Extension-Guide/