Visual Studio Code API'da Decorators Kullanımı

Visual Studio Code, kod editörüne tasarımsal olarak bazı eklemeler veya düzenlemeler için bize Decorator API isminde bir ortam sunmaktadır. Örnek olması açısından Visual Studio Code’da en çok kullanılan eklentilerden biri olan GitLens‘in kod editörüne yaptığı değişikliği gösterebiliriz.

Bu yazımda biz de buna benzer bir eklenti geliştireceğiz. Geliştireceğimiz eklenti o an açık olan dökümanda Console.WriteLine içeren ifadeleri kırmızı arkaplan ve beyaz yazı rengi ile vurgulayacak.

Daha önce Visual Studio Code için eklenti geliştirmemiş olanlar için https://code.visualstudio.com/api/get-started/your-first-extension adresindeki yazıyı okumalarını tavsiye ederim.

Eklenti oluşturmak için terminal ekranımızda aşağıdaki komutu yazmamız gerekmektedir.

yo code

Bu komutu yazdıktan sonra bize bazı sorular sorulacaktır. Geliştirme dili olarak JavaScript‘i, paket yöneticisi olarak olarak ise yarn‘ı seçtim. Gerekli bilgileri girip onayladıktan sonra eklenti projemiz oluşacak ve gerekli paketlerin kurulumları tamamlanacaktır.

İşlemler tamamlandıktan sonra oluşturulan klasörü Visual Studio Code ile açalım.

Eklenti, extension.js dosyasından başlayarak yüklenmeye başlayacaktır. Bunu değiştirmek isterseniz package.json dosyasındaki “main” bölümünü değiştirmeniz gerekmektedir. Biz şimdilik olduğu gibi bırakacağız.

package.json dosyasında geliştireceğimiz eklentinin ismi, açıklaması, kategorisi, geliştirici bilgileri, eklentide kullanılacak olan paketler gibi bilgiler bulunmaktadır. package.json dosyamızın içeriğini aşağıdaki şekilde değiştirelim.

{
  "name": "vscode-highlighter",
  "displayName": "vscode-highlighter",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.33.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:extension.highlight"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "extension.highlight",
        "title": "Highlight"
      }
    ]
  },
  "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"
  }
}

Yaptığımız değişiklik ile Visual Studio Code üzerinden Highlight komutunu verdiğimiz zaman çalışacağınız belirttik.

Şimdi eklentimiz geliştirmeye başlamak için extension.js dosyasını açalım. Bu dosyayı açtığınızda sizi ilk olarak activate ve deactivate fonksiyonları karşılayacaktır.
active fonksiyonu eklenti komutu ilk defa çağrıldığında çalışacaktır.
deactivate fonksiyonu ise eklenti devre dışı bırakıldığı zaman çalışacaktır. Burayı kullanmış olduğunuz kaynakları temizlemek için kullanabilirsiniz.

Şimdi extension.js dosyasını aşağıdaki şekilde değiştirebiliriz.

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require("vscode");
const editor = vscode.window.activeTextEditor;
let decorationType = vscode.window.createTextEditorDecorationType({
  backgroundColor: "red",
  color: "white"
});
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
 
/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
  // Use the console to output diagnostic information (console.log) and errors (console.error)
  // This line of code will only be executed once when your extension is activated
  console.log(
    'Congratulations, your extension "vscode-highlighter" is now active!'
  );
 
  // The command has been defined in the package.json file
  // Now provide the implementation of the command with  registerCommand
  // The commandId parameter must match the command field in package.json
  let disposable = vscode.commands.registerCommand(
    "extension.highlight",
    function() {
      // The code you place here will be executed every time your command is executed
 
      let decorationsArray = [];
      let documentContent = editor.document.getText();
      let sourceCodeArr = documentContent.split("\n");
 
      for (let line = 0; line < sourceCodeArr.length; line++) {
        let text = sourceCodeArr[line];
        let match = /Console\.WriteLine\(".*?"\);/.exec(text);
 
        if (match !== null && match.index !== undefined) {
          let range = new vscode.Range(
            new vscode.Position(line, match.index),
            new vscode.Position(line, match.index + match[0].length)
          );
 
          let decoration = {
            range: range
          };
 
          decorationsArray.push(decoration);
        }
      }
 
      editor.setDecorations(decorationType, decorationsArray);
    }
  );
 
  context.subscriptions.push(disposable);
}
exports.activate = activate;
 
// this method is called when your extension is deactivated
function deactivate() {}
 
module.exports = {
  activate,
  deactivate
};

25. satırda Visual Studio Code üzerinden Highlight komutu gönderildiği zaman eklentinin yapacağı işle ilgili bir fonksiyon tanımlıyoruz.

31. satır ile o an açık olan dökümanın içeriğini alıyoruz ve Regular Expression yardımıyla satırın içerisinde Console.WriteLine ifadesini arıyoruz. Eğer eşleşme olursa 5. satırda tanımlamasını yapmış olduğumuz decorator stilini ilgili alana uyguluyoruz. Decorator objesinin veri tipi DecorationOptions‘tır.

DecorationOption hakkında daha detaylı bilgi almak için https://code.visualstudio.com/api/references/vscode-api#DecorationOptions adresini ziyaret edebilirsiniz.

Eklentiyi test etmek için F5 tuşuna basmamız yeterlidir. F5 tuşuna bastıktan sonra ekrana Extension Development Host penceresi gelecektir. Eklentiyi denemek için Extension Development Host’ta F1 tuşuna basınız ve Highlight yazarak Enter tuşuna basınız. Döküman içerinde Console.WriteLine ifadesi varsa eklenti gerekli olan işlemi gerçekleştirecektir.

Yazıda bahsedilen eklentinin kaynak kodlarına https://github.com/mennan/vscode-decorator-sample adresinden erişebilirsiniz.