VSCode のExtensionを開発してみる

こんにちは。
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 の作成方法が載っているので、
見てみてください。