typescript - Bir VSCode uzantısında bir gezginde simgelerin sırasını nasıl belirlerim?

Uzantımda bir gezgin görünümünün çubuğunda bazı düğmelerim var:

Düğmelerin hangi sırayla görüneceğini nasıl belirtebilirim?

package.json dosyasında commands özelliğindeki komutların sırasını değiştirmeyi denedim:

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

Ayrıca UI'yi belirttiğim kısmı, view/title özelliğinde yeniden sıralamayı da denedim:

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

Ve ayrıca komut aboneliklerini gönderdiğim kısımda sıralamayı değiştirmeyi de denedim:

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

Ama bu yaklaşımların hiçbiri sıralamayı etkilemiş gibi görünmüyor, düğmeler her zaman görünüşte rastgele bir sırayla ortaya çıkıyor.

Sıralamayı belirtmenin uygun yolu nedir?

Cevap #1

Bir süre vscode kaynağını hata ayıkladıktan sonra çözümü buldum, sıralama burada gerçekleşiyor: https://github.com/Microsoft/vscode/blob/master/src/vs/platform/actions/electron-browser/menusExtensionPoint.ts#L365

Temelde sipariş numarası, @ sembolünden sonra komutun grup adına eklenebilir, bu yüzden aşağıdakileri yapmak zorunda kaldım.

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

Ve bunu bulduktan sonra tekrar Google'da aramayı denedim ve meğerse bu zaten düzgün bir şekilde belgelenmişmiş, ama bir şekilde bunu ilk aradığımda kaçırmışım: https://code.visualstudio.com/docs/extensionAPI/extension-points#_sorting-inside-groups

İlgili makaleler