Visual Studio Code’da Extension Nasıl Yazılır?

Selamlar,

Bugün Visual Studio Code’da custome extension nasıl oluşturulur hep beraber inceleyeceğiz.

Öncelikle eğer Pc’nizde node.js yok ise yüklemeniz gerekmektedir.

İlgili Extension projesinin oluşturulması için ben Yeoman  code generator kullandım. Aşağıdaki komutlar, command satırında çalıştırılarak yeoman code generator yüklenir ve extension code generator çalıştırılır.

Aşağıdaki menüden anlaşılacağı için gibi, her dosya tipleri için farklı extensionlar oluşturulabilmektedir. Bu örnek de “TypeScript” için Extension oluşturulacaktır.

extensionVS

package.json: Tüm configurasyon işleri burada yapılır. 

  • Öncelikle “shift+ctrl+p” yapıldığında açılan arama kutucuğunda aranacak custom extension, “displayName” : “Replace Turkish Chars” ile aranarak bulunabilmesi sağlanmıştır.
  • İlgili extension’a ait açıklama “description” : “Replace Turkish Chars to Engilish Chars from Selected Text” şeklinde tanımlanmıştır.
  • Publish zamanında Store’a ilgili uygulama “publisher”:”borakasmer” username’i tanımlanarak atılması sağlanmıştır.
  • contributes” altında bulunan “commands” sekmesi altında, extension çağrılma anında çalıştırılacak function tanımlanır. “extension.replaceTurkishChars” diğer “keybindings” sekmesinde ilgili kısa yol tuşları tanımlanır. “ctrl+t“.

Extension

extension.ts: “yo code” ile ilgili proje oluşturulunca, aşağıdaki “extension.ts” dosyası otomatik olarak oluşur. Tüm işlemler burda yapılmaktadır. İsterseniz kodları adım adım inceleyelim.

  • Extension ilk çağrıldığında “active()” function’ı çalıştırılır. Altında custom olarak yazılmış “extension.replaceTurkishChars()” function’ı çağrılmaktadır.
  • var editor = vscode.window.activeTextEditor;” ilgili yazıların yazıldığı text editörüne erişilir.
  • var selection = editor.selection;” ile seçilen text objesi alınır.
  • editor.document.getText(selection)” seçilmiş olan string text değer alınır.
  • CleanTurkishCharcter()” function’ı ile regular expresion kullanılarak, ilgili seçili text’deki tüm türkçe karakterler bulunup, ingilizce karşılıklarına çevrilerek geri dönülür.
  • editor.edit()” function’ı içinde “editBuilder.replace(selection, str)” function’ı kullanılarak seçilen text, dönülen yeni ingilizce karşılıklı text ile değiştirilir.
  • Son olarak “vscode.window.showInformationMessage(‘Selected characters: ‘ + text.length);” ile seçilen toplam karakter sayısı mesaj olarak ekrana basılır.

Bundan sonra geriye bir tek test etmek kaldı. Bunun için “extension.ts” sayfası açık iken, aşağıda görüldüğü gibi debug modda uygulama çalıştırılır. Ve simalatör olarak yeni bir VS Code karşımıza çıkar. Bundan sonra türkçe karakterler  içeren text’in ekrana yazılıp “CTRL+T” tuşlarına basılması ile, “extension.replaceTurkishChars()” function’ının tetiklenmesi ve türkce karakterlerin temizlenip, seçilen karakter sayısının ekrana mesaj olarak basılması zevk ile izlenebilir.

debug

İlgili uygulamanın nasıl publish edilip store’a konabileceği yandaki link’den öğrenilebilir. https://code.visualstudio.com/docs/tools/vscecli

Böylece geldik bir makalenin daha sonuna. Bu makalede amaç ufkunuzu açmaktı. Hayal gücünüzü kullanarak çok daha gelişmiş extensionları sizden bekliyorum.

Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Sevebilirsin...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir