「VS Code 拡張機能」ってどう実装するんだろう．最近 VS Code を使う場面が多いため，便利な拡張機能にコントリビュートしたり，自分用に拡張機能を作ったりする機会もありそう．さらに今まで TypeScript をほとんど書いたことがなく，書く機会を探していたという側面もある．今回は VS Code ドキュメントに載っている「Get Started: Your First Extension」を試してみた．

雛形を自動生成する

まず，Yeoman を使って雛形となる「Hello World Sample」を自動生成する．今回はドキュメントの通りに TypeScript で HelloWorld という名前の「VS Code 拡張機能」を作ることにした．

$ npm install -g yo generator-code

$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? HelloWorld
? What's the identifier of your extension? helloworld
? What's the description of your extension?
? Initialize a git repository? Yes
? Which package manager to use? npm

自動生成したディレクトリ階層は以下のようになる．

$ tree -L 1
.
├── CHANGELOG.md
├── README.md
├── node_modules
├── out
├── package-lock.json
├── package.json
├── src
├── tsconfig.json
├── tslint.json
└── vsc-extension-quickstart.md

3 directories, 7 files

Extension Development Host ウィンドウ

VS Code で helloworld ディレクトリを開き，さっそく F5 を押すと，拡張機能の動作確認をする「Extension Development Host ウィンドウ」が起動する．次に「コマンドパレット」から「Hello World」を選択すると，画面右下にメッセージが表示される．おおおー！

f:id:kakku22:20190803170008p:plain

`src/extension.ts` を修正する

src/extension.ts を開くと，画面右下にメッセージを表示する実装を確認できる．

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

以下のように文字列部分を修正すると，実際に反映された．

vscode.window.showInformationMessage('Hello VS Code!');

ドキュメントに「現在時刻を表示してみよう！」という追加課題もあり，実際に書いてみた．おおおー！

vscode.window.showInformationMessage(new Date().toString());

f:id:kakku22:20190803183523p:plain

拡張機能をデバッグする

VS Code のデバッグ機能を使うと，簡単にステップ実行もできる．これは便利！

f:id:kakku22:20190803224143p:plain

「Get Started: Your First Extension」の内容はここまでとなり，あくまで第一歩ではあるけど，拡張機能をどのように実装し，デバッグするのかを知ることができた点で，非常に価値があった．続くドキュメント「Extension Anatomy」も合わせて読んでおくと良いと思う．

code.visualstudio.com

Contribution Points : contributes.commands

作成した HelloWorld をもう少し変えていく．今回は以下のドキュメント「Contribution Points」を読みながら試してみた．

code.visualstudio.com

package.json の中に定義されている contributes.commands に category を追加すると，「コマンドパレット」からコマンドを検索するときにカテゴリー表示（カテゴリ名: コマンド名）となる．確かによく使う拡張機能は全部カテゴリー表示になっている．

{
    （中略）
    "contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World",
                "category": "Hello"
            }
        ]
    },
    （中略）
}

f:id:kakku22:20190803230409p:plain

vscode-extension-samples

以下の GitHub リポジトリに VS Code 拡張機能のサンプルが多く公開されている．今回作成した「Hello World Sample」も helloworld-sample ディレクトリにある．他のサンプルを動かしながら拡張機能でできることを把握したり，実装例を確認したり，よく見るリポジトリになりそう．

github.com