如何配置 VSCode 的 Organize Imports 顺序？

Posted 2023-02-22

【中文标题】如何配置 VSCode 的 Organize Imports 顺序？

【英文标题】：How to config VSCode's Organize Imports order?

【发布时间】：2019-10-20 18:46:39

【问题描述】：

我想配置 Organize Imports 的订单。

现在，它将node_modules相关的导入语句移到最顶部，将本地ts文件移到最底部：

正常：

import myFunction from './myFunction';
import fs from 'fs';

console.log(fs)
console.log(myFunction)

运行 Organize Imports 命令后：

import fs from 'fs';
import myFunction from './myFunction';

console.log(fs)
console.log(myFunction)

我想做的是颠倒顺序，我希望node_modules 非常低，本地导入非常高。

我怎样才能实现这种行为？

【问题讨论】：

我根本不熟悉 Organize Imports，但快速阅读 marketplace.visualstudio.com/… 表明您需要定义您的 groups，以便您拥有 relative 和 relativeDirect在数组中更高。

【参考方案1】：

内置的“组织导入”功能没有配置，根据the documentation。

您可以使用第三方扩展程序（例如 alfnielsen.vsc-organize-imports）或使用单独的 lint 工具（例如 eslint 或 tslint）自定义导入顺序。

在 eslint 中（我的建议，因为 tslint 已被弃用），您还需要使用像 eslint-plugin-import 这样的插件来获得您想要的更具体的配置。然后，您将使用“Fix All”操作或调用quick fix，而不是使用VSCode“组织导入”操作。

这是.eslint.js 配置文件的部分示例。

module.exports = 
  plugins: [
    "import",
  ],
  rules: 
    "import/order": [
      "error",
      
        groups: [
          "index",
          "sibling",
          "parent",
          "internal",
          "external",
          "builtin"
        ]
      
    ]
  

【讨论】：

顺序相反，应该是分组：["builtin", "external", "internal", "parent", "sibling", "index", "object"]