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.
|
1 2 |
npm install -g yo generator-code yo code |
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.
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“.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
{ "name": "replace-TurkishChars", "displayName": "Replace Turkish Chars", "description": "Replace Turkish Chars to Engilish Chars from Selected Text", "version": "0.0.1", "publisher": "borakasmer", "engines": { "vscode": "^1.0.0" }, "categories": [ "Other" ], "activationEvents": [ "onCommand:extension.replaceTurkishChars" ], "main": "./out/src/extension", "contributes": { "commands": [{ "command": "extension.replaceTurkishChars", "title": "Replace Turkish Chars" }], "keybindings": [ { "command": "extension.replaceTurkishChars", "key": "ctrl+t", "mac": "cmd+t" } ] }, "scripts": { "vscode:prepublish": "node ./node_modules/vscode/bin/compile", "compile": "node ./node_modules/vscode/bin/compile -watch -p ./", "postinstall": "node ./node_modules/vscode/bin/install" }, "devDependencies": { "typescript": "^1.8.5", "vscode": "^0.11.0" } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
'use strict'; // The module 'vscode' contains the VS Code extensibility API // Import the module and reference it with the alias vscode in your code below import * as vscode from 'vscode'; // this method is called when your extension is activated // your extension is activated the very first time the command is executed export function activate(context: vscode.ExtensionContext) { // 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 "replace-TurkishChars" 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.replaceTurkishChars', () => { // Burdaki kodlar extension her çağrıldığında çalıştırılacaktır. // Text'in yazıldığı editor. var editor = vscode.window.activeTextEditor; if (!editor) { return; // Hiçbir texteditor'ü açık değil. } var selection = editor.selection; var text = editor.document.getText(selection); var startLine = selection.start.line; var startCharacter = selection.start.character; var str=CleanTurkishCharcter(text); editor.edit((editBuilder) => { //var pos = new vscode.Position(startLine, startCharacter); editBuilder.replace(selection, str); }).then(() => { //console.log('Edit applied!'); }, (err) => { console.log('Edit rejected!'); console.error(err); }); // Kullanıcıya gösterilecek mesaj kutusu. vscode.window.showInformationMessage('Selected characters: ' + text.length); }); context.subscriptions.push(disposable); } // this method is called when your extension is deactivated export function deactivate() { } //Seçilen string değerdeki türkçe karakterleri ingilicze karşılıkları ile değiştirir. export function CleanTurkishCharcter(TextValue:string) { var Source,Destination : string; Source = "ığüşöçĞÜŞİÖÇ"; Destination= "igusocGUSIOC"; //vscode.window.showInformationMessage('Selected Text: ' + TextValue); for (var index = 0; index < Source.length; index++) { TextValue = TextValue.replace(new RegExp(Source[index],"gm"),Destination[index]); } return TextValue; } |
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.
İ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.
Source:
Son Yorumlar