kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

VS Code 拡張機能を実装する第一歩を踏み出すために「Get Started: Your First Extension」を試した

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

code.visualstudio.com

雛形を自動生成する

まず,Yeoman を使って雛形となる「Hello World Sample」を自動生成する.今回はドキュメントの通りに TypeScriptHelloWorld という名前の「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.commandscategory を追加すると,「コマンドパレット」からコマンドを検索するときにカテゴリー表示(カテゴリ名: コマンド名)となる.確かによく使う拡張機能は全部カテゴリー表示になっている.

{
    (中略)
    "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

まとめ

  • 「VS Code 拡張機能」を実装する第一歩を踏み出してみた
  • 最初は VS Code ドキュメントに載っている「Get Started: Your First Extension」を参考にすると良さそう
  • 今後はサンプル集などを参考に理解を深めていく
  • ブログ関連の拡張機能を作ってみるかなぁー!