Visual Studio Code API'da Context Menu Alanına Menü Ekleme

Visual Studio Code eklentisi geliştirirken ekranın sol tarafında bulunan Explorer alanına menü eklemek isteyebiliriz. Bunu yapabilmek için eklenti projemizin ana dizininde bulunan package.json‘ın menus bölümüne ekleme yapmamız gerekmektedir.

Öncelikle aşağıdaki komutu kullanarak yeni bir Visual Studio Code projesi oluşturalım.

yo code

Oluşturmuş olduğumuz projeyi Visual Studio Code ile açalım ve package.json dosyasının içeriğini aşağıdaki şekilde değiştirelim.

{
  "name": "vscode-contextmenu-sample",
  "displayName": "vscode-contextmenu-sample",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.36.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:extension.helloWorld"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "Hello World"
      }
    ],
    "menus": {
      "explorer/context": [
        {
          "group": "navigation",
          "command": "extension.helloWorld"
        }
      ]
    }
  },
  "scripts": {
    "postinstall": "node ./node_modules/vscode/bin/install",
    "test": "node ./node_modules/vscode/bin/test"
  },
  "devDependencies": {
    "typescript": "^3.3.1",
    "vscode": "^1.1.28",
    "eslint": "^5.13.0",
    "@types/node": "^10.12.21",
    "@types/mocha": "^2.2.42"
  }
}

contributes node’unun altına menus isminde bir node daha ekledik. explorer/context ile menünün context menu alanında nereye yerleşeceğini belirledik. command alanında ise menüye tıklanıldığında eklentimize ait çalışacak olan komutu belirttik.

Aşağıda context menu’ye ait alanların adları ve yerleşim yerleri bulunmaktadır.

Şimdi projemizi test edelim. F5 tuşuna basarak eklentimizin yüklenmesini sağlayalım. Ekrana gelen Extension Development Host penceresinde sol taraftaki Explorer bölümüne tıklayarak menümüzün yüklenip yüklenmediğini kontrol edelim.

Görüldüğü gibi 3. sıraya Hello World isminde menümüz eklendi.

Örnek uygulamaya https://github.com/mennan/vscode-contextmenu-sample adresinden erişebilirsiniz.