如何在 VSCode 扩展中指定资源管理器视图中的图标顺序？

Question

在我的扩展程序中，我在资源管理器视图栏上有一些按钮：

如何指定按钮的显示顺序？

我尝试更改 package.json commands 属性中命令的顺序：

"commands": [
  {
    "command": "codeFragments.exportFragments",
    "title": "Export all fragments to Json",
    "icon": {
      "light": "images/icon-export-light.png",
      "dark": "images/icon-export-dark.png"
    }
  },
  {
    "command": "codeFragments.importFragments",
    "title": "Import fragments from Json",
    "icon": {
      "light": "images/icon-import-light.png",
      "dark": "images/icon-import-dark.png"
    }
  },
  {
    "command": "codeFragments.deleteAllFragments",
    "title": "Delete all fragments",
    "icon": {
      "light": "images/icon-delete-light.png",
      "dark": "images/icon-delete-dark.png"
    }
  }
],

还尝试在我指定 UI 的部分重新排序，在 view/title 属性:

"view/title": [
  {
    "command": "codeFragments.exportFragments",
    "when": "view == codeFragments",
    "group": "navigation"
  },
  {
    "command": "codeFragments.importFragments",
    "when": "view == codeFragments",
    "group": "navigation"
  },
  {
    "command": "codeFragments.deleteAllFragments",
    "when": "view == codeFragments",
    "group": "navigation"
  }
],

并且还尝试在推送命令订阅时更改部分中的顺序：

context.subscriptions.push(
  vscode.commands.registerCommand('codeFragments.exportFragments', exportFragments));
context.subscriptions.push(
  vscode.commands.registerCommand('codeFragments.importFragments', importFragments));
context.subscriptions.push(
  vscode.commands.registerCommand('codeFragments.deleteAllFragments', deleteAllFragments));

但是 none 这些方法似乎会影响顺序，按钮总是以看似偶然的顺序出现。

指定顺序的正确方法是什么？

Answer 1

调试vscode源代码一段时间后，我找到了解决方案，排序在这里：https://github.com/Microsoft/vscode/blob/master/src/vs/platform/actions/electron-browser/menusExtensionPoint.ts#L365

基本上可以在 @ 符号后将命令编号附加到命令的组名，所以我必须执行以下操作。

"view/title": [
  {
    "command": "codeFragments.exportFragments",
    "when": "view == codeFragments",
    "group": "navigation@0"
  },
  {
    "command": "codeFragments.importFragments",
    "when": "view == codeFragments",
    "group": "navigation@1"
  },
  {
    "command": "codeFragments.deleteAllFragments",
    "when": "view == codeFragments",
    "group": "navigation@2"
  }
],

找到这个之后，我再次尝试google，结果发现这已经被正确记录了，但不知何故我在第一次搜索时错过了它：https://code.visualstudio.com/docs/extensionAPI/extension-points#_sorting-inside-groups

如何在 VSCode 扩展中指定资源管理器视图中的图标顺序？

How to specify the order of icons in an explorer view in a VSCode extension?

typescript

visual-studio-code

vscode-extensions