Microsoft Visual Codeのエクステンションを作成してみた
概要
@ITの記事、 特集:Visual Studio Code早分かりガイド:Visual Studio Codeのエクステンションを作成する (1/2) - @ITを参考にして、Microsoft Visual Codeのエクステンションを作成してみました。
エクステンション作成手順
ひな形を作成する
extension generatorをインストールする。
$ npm install -g yo generator-code
$ yo code
入力の一例
質問項目 | 値 |
---|---|
Extension Type | TypeScript(default) |
エクステンションの名前 | hello |
エクステンション識別子 | hello |
エクステンションの説明 | This is a hello world. |
発行者 | unokun |
実行する
1) エクステンション作成したフォルダでVisual Codeを起動する。$ code .
2) エクステンションを実行する
Shift+Command+Pでエクステンションを実行する。
メッセージボックスが表示される。
機能を修正する
選択した領域の字数を表示するように修正する。
var editor = vscode.window.activeTextEditor; if (!editor) { return; } var selection = editor.selection; var text = editor.document.getText(selection); vscode.window.showInformationMessage('selected characers: ' + text.length);エクステンションを再読込する
Command+R(MacOS)でエクステンションを再読み込みする。
エクステンションを再実行する
テキストを入力し、範囲選択する。Shift+Command+Pでエクステンションを実行する。
選択されているテキストの文字数がメッセージボックスに表示される。
さらに機能を拡張する
このページの最後、Next Stepsを参考にして進める。