こんにちは。
Visual Studio Code、使っていますか？
ぼくはこのエディタが大好きです。
今回は、このエディタの Extension（＝プラグイン）の開発をしていきたいと思います。
※ node.js が必要です！
開発方法
- TypeScript + Node.js でいけます。
- ジェネレータは Yeoman でできています。
手順1: Yeomanを入れる。
npm install -g yo
また、VSCode Extension generatorも入れます。
npm install -g generator-code
手順2: ジェネレータを実行
> yo code
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes
_-----_
| | .--------------------------.
|--(o)--| | Welcome to the Visual |
`---------´ | Studio Code Extension |
( _´U`_ ) | generator! |
/___A___\ '--------------------------'
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? first-ext
? What's the identifier of your extension? first-ext
? What's the description of your extension? first-ext
? What's your publisher name? xxx
? Initialize a git repository? No
create first-ext\.vscode\launch.json
create first-ext\.vscode\settings.json
create first-ext\.vscode\tasks.json
create first-ext\typings\node.d.ts
create first-ext\typings\vscode-typings.d.ts
create first-ext\test\extension.test.ts
create first-ext\test\index.ts
create first-ext\.vscodeignore
create first-ext\.gitignore
create first-ext\README.md
create first-ext\vsc-extension-quickstart.md
create first-ext\tsconfig.json
create first-ext\src\extension.ts
create first-ext\package.json
I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.
Extension の形式は、TypeScript がおすすめです。
開発するとき、インテリセンス君が強力に働いてくれて便利だからです。
その後、名前、識別子、説明、開発者名、Git と聞かれます。
今回は、Git の設定は n にして置きました。
ずらーとモジュールがインストールされます。
手順3: Extension を実行
> cd first-ext > code .
code . がうまくいかない時は、
first-ext フォルダを VSCode で開いてください。
ジェネレータを実行した状態で、
Hello world が試せるようになっているので、
作った Extension を実行してみましょう。
左側のデバッグボタン（虫）をクリック、緑色の再生ボタンをクリックします。
（ちなみに F5 キーでもいけますー）
すると、デバッグ用の VSCode がもう一つ起動します。
この状態で、Extension をテスト（＝実行）できるわけです。
デバッグ用に開いた VSCode で、Ctrl + Shift + P をしてコマンドパレットを開きます。
Hello world と入力しEnter キーを押してみましょう。
Hello world というメッセージが表示されます。
この動きは、すべて今作った Extension で動いています。
では、どういう仕組みで動いているのか見てみましょう。
手順4: 動く仕組みは・・？
↑ ざっくりとした流れの画像
いまデバッグしていたウインドウは閉じて、
先ほどのプラグインを開いたウインドウに切り替えましょう。
まず、コマンドパレットで「Hello World」と入力しましたね。
これはpackage.json の、contributes.commands から取得されています。
ここでは、コマンドパレットでHello Worldが実行されたら、
extension.sayHelloを実行すると書いてあります。
では、この extension.sayHello はどこにあるのでしょう。
src/extension.ts を開いてみましょう。
activate 関数の中に、
vscode.commands.registerCommand(...)を呼び出している行があります。（17行目）
ここでは、extension.sayHello コマンドが呼び出されたら、
第二引数のコールバック関数を実行する、となっています。
コールバック関数には、
vscode.window.showInformationMessage('Hello World!')
と書かれています。
これは、指定された文字列を先ほどのようなメッセージで表示する関数です。
手順5: 少し変えてみる
extension.ts を、少し変更してみましょう。
let 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.showErrorMessage('Hello Error Message!');
});
似た関数で、showErrorMessage という物があります。
これは、エラーを表示する関数です。
実行してみましょう。手順は先程と同じです。
（F5キーでもいけるよ）
同じように、Ctrl+Shift+P から Hello World を選ぶと、
エラーメッセージ出現！
まとめ
このように、Extension は、
TypeScript + Node.js で開発できます。
また、公式サイトにも英語ですが、
Extension の作成方法が載っているので、
見てみてください。
