Visual Studio Codeの拡張機能をTypeScriptで作る方法

じわじわとシェアを広げているC#だけれど、今一マジョリティを取れないのは、C#でアプリを作る際の敷居の高さから来ているのだろう。

.Netのオープンソース化やVisual Studio Dev Essentialsによってその敷居が低くなってきているから、時を待てばC#が一層普及するだろうなと感じている秋このごろ。

C#の波に乗りますか？乗り遅れますか？Visual Studio Dev Essentialsが拓く未来

一方、C#の生みの親であるAnders Hejlsbergの手になるTypeScriptは着々と支持を得ている。

今回は、TypeScriptを使ってVisual Studio Codeの拡張機能を作る方法を解説したい。

※Macを対象としていますが、適宜読み替えればWindows版でも同じ手順となります。

Contents

1 拡張機能プロジェクトを作る
2 ひとまず実行してみる
3 拡張機能を書いてみる
4 TypeScriptのデバッグ
5 拡張機能を使うには？
6 package.jsonとは？

拡張機能プロジェクトを作る

プロジェクトはYeomanで作る。そのため、まずはVisual Studio Code用のジェネレーターを入れる。コンソールでこれを叩こう。

npm install -g yo generator-code

1	npm install -g yo generator-code

ジェネレーターのインストールが終わったら、”yo code”を実行する。

Yo爺に何を作るか聞かれるから、”New Extension (TypeScript)”を選ぶと自動でプロジェクトを作ってくれる。

ひとまず実行してみる

Yeomanで作成したプロジェクトのディレクトリーを開き、fn + F5で拡張機能が実行される。

無事に実行されると新しいウィンドウが立ち上がる。そこでShift + Command + Pでコマンドパレットを開き、”Hello World”と入力してコマンドを実行すれば、”Hello World”と通知されるはずだ。

ちなみにF5はデバッグ実行のショートカットキーだから、コマンドパレットで”Debug: Start”を選んでも同じ様に実行される。

拡張機能を書いてみる

ここまでは単にYeomanでプロジェクトを作って実行しただけなので、もう一歩踏み込んで拡張機能の作り方を見ていく。

まずsrc/extension.tsを開いてみると、つらつらとコードが書き連ねてあることがわかる。

// 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 "helloextension" 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
	var disposable = vscode.commands.registerCommand('extension.sayHello', () => {
		// The code you place here will be executed every time your command is executed

		// Display a message box to the user
		vscode.window.showInformationMessage('Hello World!');
	});
	
	context.subscriptions.push(disposable);
}

// 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 "helloextension" 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

var disposable = vscode.commands.registerCommand('extension.sayHello', () => {

// The code you place here will be executed every time your command is executed

// Display a message box to the user

vscode.window.showInformationMessage('Hello World!');

});

context.subscriptions.push(disposable);

}

初めのimport文では、Visual Studio Codeが用意しているAPIにアクセスするため、vscodeモジュールを読み込んでいる。
次にactivate()の実装になる。この関数がexportされているのはどうしてだかわかりますか？そう！ご名答！拡張機能が起ち上がったときに呼ばれるのです。
コンソール出力を経て、registerCommand()を呼んでいる箇所は、コマンドのID(‘extension.sayHello’)とその処理内容を無名関数のコールバックで渡している。コマンドパレットで”Hello World”と入力してコマンドを呼ぶと、ここで登録しておいたコマンドが呼ばれるわけだけれど、そのひも付けは後ほど解説するpackage.jsonで行う。
コールバックで呼ばれているShowInformationMessage()は、ユーザーに対して情報を表示するためのもの。こいつで”Hello World”と表示している。
最後に、ExtensionContext型のインスタンスであるcontextにregisterCommand()の返り値(disposable)を渡している。こうすることで、拡張機能が消えるときにコマンドも消してくれる。

ざっと処理を見てきたところで、ShowInformationMessage()をいじってみる。この引数がユーザーへ表示されるから、好きなテキストを入れてみよう。

僕は、スターウォーズ Episode7の公開を記念して、”覚醒するフォース！”と入れる。コマンドを呼ぶ度に”覚醒するフォース！”と表示されるシュールアプリの爆誕だ。

// Display a message box to the user
vscode.window.showInformationMessage('覚醒するフォース！');

1 2	// Display a message box to the user vscode.window.showInformationMessage('覚醒するフォース！');

コーディングが終わったら、さっきと同じくF5を押して動きを確かめてみよう。

TypeScriptのデバッグ

TypeScriptで書いていると、JavaScriptでやりがちなミスはコーディング中やトランスパイル時に拾って知らせてくれる。それでもバグというのは入りこむもの。そんなときでもVisual Studio Codeが役に立つ。

実行を一時中断したい行の左をクリックしてブレークポイントを打ち……

拡張機能を走らせればブレークポイントで止まるので、左メニューの虫のアイコンを押して画面を切り替えれば、その時点での各状態を見られる。

拡張機能を使うには？

作った拡張機能は、プロジェクトのディレクトリーを丸ごと以下の場所に置くことで使えるようになる。

Windows: %USERPROFILE%\.vscode\extensions
Mac/Linux: $HOME/.vscode/extensions

もしあなたがシュールアプリを全世界へ発信したいなら、Visual Studio Codeの拡張機能ストアで公開しよう。その方法はまた別のお話……。

package.jsonとは？

最後に、プロジェクトルートにあるpackage.jsonについて解説しよう。

拡張機能の説明や、拡張機能を呼ぶためのコマンド（今回は”Hello World”）をこのファイルに記述する。

今回は、このファイルの中でも、”commands”という部分が重要になってくる。

"commands": [{
  "command": "extension.sayHello",
  "title": "Hello World"
}]

"commands": [{

"command": "extension.sayHello",

"title": "Hello World"

}]

コマンドパレットで呼び出していたコマンドと処理をこの部分で関連付けている。

今回呼んだ”Hello World”に対応するコマンドのIDは”extension.sayHello”だとここで設定しているが、extension.tsで同じIDで登録しておいた処理が呼び出されるという流れになる。

年末年始の休みはビール買って、ラーメン買って、カニも買っちゃってお籠りプログラミング！12/8(火)からのamazon年末セール・サイバーマンデー対象商品です。

Visual Studio Codeの拡張機能をTypeScriptで作る方法

拡張機能プロジェクトを作る

ひとまず実行してみる

拡張機能を書いてみる

TypeScriptのデバッグ

拡張機能を使うには？

package.jsonとは？

Similar Posts

Visual Studio Codeのコマンドパレットでリスト(Quick Pick)を出す方法

Slack 新チームの作り方と、招待されてからすること。

Googleが推奨する、SEOに最適な無限スクロールをjScrollで実装する

Visual Studio Code 拡張機能のアクティベート activationEvents

[Buildほか] 2016年に開催されるマイクロソフトのイベント

Visual Studio CodeのES6用拡張機能で爆速ES6コーディング

More Posts

[最新版] Noto Sans JapaneseをWebフォントとして使う方法

三島由紀夫インスパイア映画「バードマンあるいは（無知がもたらす予期せぬ奇跡）」

Web集客に興味のある人必見。ホームページの集客効果を測定する方法

絶対に見た方がイイ名作アニメ映画 / OVAのおすすめ42選！第九話

Bootstrap Studioはあなたのサイトデザインを爆速にする。

Web集客でインスタグラムを使う際におすすめなハッシュタグ

[iOS] SwiftでLINEログイン・認証する方法

もう悩まない。読まれるブログ記事タイトルを作る12の方法

絶対に見た方がイイ名作アニメ映画 / OVAのおすすめ42選！第拾話

お洒落カフェからバーまで。女性の京都ひとり旅の観光スポットおすすめ12選