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

Question

In my extension I have some buttons on the bar of an explorer view:

How can I specify the order in which the buttons will appear?

I tried changing in the package.json the order of the commands in the commands property:

"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"
    }
  }
],

Also tried reordering in the part where I specify the UI, in the view/title property:

"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"
  }
],

And also tried to change the order in the part when I'm pushing the command subscriptions:

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

But none of these approaches seem to affect the order, the buttons always appear in a seemingly incidental order.

What's the proper way to specify the order?

Answer 1

After debugging the vscode source for a while, I found the solution, the sorting is happening here: https://github.com/Microsoft/vscode/blob/master/src/vs/platform/actions/electron-browser/menusExtensionPoint.ts#L365

Basically the order number can be appended to the group name of the command after an @ symbol, so I had to do the following.

"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"
  }
],

And after finding this, I tried to google again, and it turns out this was properly documented already, but somehow I missed it when searching for it the first time: https://code.visualstudio.com/docs/extensionAPI/extension-points#_sorting-inside-groups