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

【问题标题】：How to specify the order of icons in an explorer view in a VSCode extension?如何在 VSCode 扩展的资源管理器视图中指定图标的顺序？
【发布时间】：2018-05-16 17:23:47
【问题描述】：

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

如何指定按钮出现的顺序？

我尝试在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"
    }
  }
],

还尝试在 view/title 属性中指定 UI 的部分重新排序：

"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));

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

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

【问题讨论】：

标签： typescript visual-studio-code vscode-extensions

【解决方案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"
  }
],

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

【讨论】：