読者です 読者をやめる 読者になる 読者になる

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

f:id:unokun3:20151201214709p:plain

入力の一例

質問項目
Extension TypeTypeScript(default)
エクステンションの名前hello
エクステンション識別子hello
エクステンションの説明This is a hello world.
発行者unokun

実行する

1) エクステンション作成したフォルダでVisual Codeを起動する。
$ code .

2) エクステンションを実行する

Shift+Command+Pでエクステンションを実行する。

f:id:unokun3:20151201080059p:plain

メッセージボックスが表示される。

f:id:unokun3:20151201080213p:plain

機能を修正する

選択した領域の字数を表示するように修正する。

	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);

f:id:unokun3:20151201080243p:plain

エクステンションを再読込する

Command+R(MacOS)でエクステンションを再読み込みする。

エクステンションを再実行する

テキストを入力し、範囲選択する。Shift+Command+Pでエクステンションを実行する。

f:id:unokun3:20151201080059p:plain

選択されているテキストの文字数がメッセージボックスに表示される。

f:id:unokun3:20151201080342p:plain

さらに機能を拡張する

このページの最後、Next Stepsを参考にして進める。

関連情報