VSCode のExtensionを開発してみる

TOC

  1. 開発方法
  2. 手順1: Yeomanを入れる。
  3. 手順2: ジェネレータを実行
  4. 手順3: Extension を実行
  5. 手順4: 動く仕組みは・・?
  6. 手順5: 少し変えてみる
  7. まとめ

こんにちは。
Visual Studio Code、使っていますか?
ぼくはこのエディタが大好きです。

今回は、このエディタの Extension(=プラグイン)の開発をしていきたいと思います。

※ node.js が必要です!

開発方法

  • TypeScript + Node.js でいけます。
  • ジェネレータは Yeoman でできています。

手順1: Yeomanを入れる。

1
$ npm install -g yo

また、VSCode Extension generatorも入れます。

1
$ npm install -g generator-code

手順2: ジェネレータを実行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$ 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 を実行

1
2
$ cd first-ext
$ code .

code . がうまくいかない時は、
first-ext フォルダを VSCode で開いてください。

ジェネレータを実行した状態で、
Hello world が試せるようになっているので、
作った Extension を実行してみましょう。

左側のデバッグボタン(虫)をクリック、緑色の再生ボタンをクリックします。
(ちなみに F5 キーでもいけますー
すると、デバッグ用の VSCode がもう一つ起動します。

vscode-ext-debug

この状態で、Extension をテスト(=実行)できるわけです。

デバッグ用に開いた VSCode で、Ctrl + Shift + P をしてコマンドパレットを開きます。
Hello world と入力しEnter キーを押してみましょう。

vscode-ext-command

Hello world というメッセージが表示されます。

vscode-ext-info-message

この動きは、すべて今作った Extension で動いています。

では、どういう仕組みで動いているのか見てみましょう。

手順4: 動く仕組みは・・?

vscode-ext-nagare
↑ ざっくりとした流れの画像

いまデバッグしていたウインドウは閉じて、
先ほどのプラグインを開いたウインドウに切り替えましょう。

まず、コマンドパレットで「Hello World」と入力しましたね。
これはpackage.json の、contributes.commands から取得されています。

vscode-ext-package.json

ここでは、コマンドパレットでHello Worldが実行されたら、
extension.sayHelloを実行すると書いてあります。

では、この extension.sayHello はどこにあるのでしょう。
src/extension.ts を開いてみましょう。

vscode-ext-extension.ts

activate 関数の中に、
vscode.commands.registerCommand(...)を呼び出している行があります。(17行目)
ここでは、extension.sayHello コマンドが呼び出されたら、
第二引数のコールバック関数を実行する、となっています。

コールバック関数には、
vscode.window.showInformationMessage('Hello World!')
と書かれています。
これは、指定された文字列を先ほどのようなメッセージで表示する関数です。

手順5: 少し変えてみる

extension.ts を、少し変更してみましょう。

1
2
3
4
5
6
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 を選ぶと、

vscode-ext-show-err-msg

エラーメッセージ出現!

まとめ

このように、Extension は、
TypeScript + Node.js で開発できます。

また、公式サイトにも英語ですが、
Extension の作成方法が載っているので、
見てみてください。