VSCode エクステンション開発チュートリアルをやってみる
薄田達哉 / tatsuyasusukidaこのスクラップについて
ちょっとしたきっかけで興味が湧いたので、このスクラップでは下記 VSCode エクステンション開発チュートリアルをやっていく過程を記録していく。
薄田達哉 / tatsuyasusukidaYeoman のインストール
Yeoman 懐かしい、こんなところで再会するとは。
npm install --global yo generator-code
グローバルにインストールしたくない場合は下記でも良いようだ。
npx --package yo --package generator-code -- yo code
プロジェクトの生成
yo code
? What type of extension do you want to create? (Use arrow keys)
❯ New Extension (TypeScript)
New Extension (JavaScript)
New Color Theme
New Language Support
New Code Snippets
New Keymap
New Extension Pack
New Language Pack (Localization)
New Web Extension (TypeScript)
New Notebook Renderer (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? (Y/n)
? Which bundler to use? (Use arrow keys)
❯ none
webpack
esbuild
? Which package manager to use? (Use arrow keys)
❯ npm
yarn
pnpm
? Do you want to open the new folder with Visual Studio Code? (Use arrow keys)
❯ Open with `code`
Skip
Web Extension
これを使えば Web 版 VSCode で動くエクステンションが作れそうだ。
薄田達哉 / tatsuyasusukida実行
src/extension.ts で F5 キーを押すと VSCode が立ち上がる。
Ctrl + Shift + P で Hello World を実行すると通知が表示される。
薄田達哉 / tatsuyasusukidaソースコードの変更
通知メッセージを「Hello VS Code」に変更する。
import * as vscode from "vscode";
export function activate(context: vscode.ExtensionContext) {
console.log('Congratulations, your extension "helloworld" is now active!');
let disposable = vscode.commands.registerCommand(
"helloworld.helloWorld",
() => {
vscode.window.showInformationMessage("Hello VS Code");
}
);
context.subscriptions.push(disposable);
}
export function deactivate() {}
変更を反映するには Extension Development Host の方の VSCode で「Developer: Reload Window」を実行すれば良いようだ。
Command + R でも良い。
この状態で Hello World コマンドを実行するとメッセージが変更されたことを確認できる。
薄田達哉 / tatsuyasusukidaデバッガーの使用
コードにブレークポイントを設定してから呼び出すとデバッガーが起動する。
薄田達哉 / tatsuyasusukida面白い
せっかくなので Extension Anatomy のページも後日一読してみよう。
薄田達哉 / tatsuyasusukidaExtension Anatomy
Hello World エクステンションは次の 3 つのことをしている。
- onCommand アクティベーションイベントの登録
- contributes.commands コントリビューションポイントの使用
- commands.registerCommand VS Code API の使用
アクティベーションイベント
エクステンションをアクティブにするイベント
コントリビューションポイント
package.json に記載される
VS Code API
エクステンションのコードで使用する VS Code の機能を呼び出すための API
薄田達哉 / tatsuyasusukida次は Extension File Structure
薄田達哉 / tatsuyasusukidaWebview API が気になる
これを使えば面白いことができそうだ。
薄田達哉 / tatsuyasusukidaExtension File Structure
.
├── .vscode
│ ├── launch.json // Config for launching and debugging the extension
│ └── tasks.json // Config for build task that compiles TypeScript
├── .gitignore // Ignore build output and node_modules
├── README.md // Readable description of your extension's functionality
├── src
│ └── extension.ts // Extension source code
├── package.json // Extension manifest
├── tsconfig.json // TypeScript configuration
- launch.json：デバッグ時の起動設定
- tasks.json：ビルドタスク設定
- tsconfig.json：TypeScript 設定
package.json と extension.ts については詳しく見ていく。
薄田達哉 / tatsuyasusukidaExtension Manifest
package.json には下記のような VS Code 固有のフィールドが含まれる。
- publisher
- activationEvents
- contributes
VS Code では <publisher>.<name> がエクステンション固有の ID として使用される。
main フィールドはエクステンションのエントリーポイントを指定する。
contributes フィールドはエクステンションが寄与するポイントを指定する。
engines.vscode は VS Code の利用可能な最小バージョンを指定する。
VS Code のバージョンが 1.74以前の場合は onCommand のアクティベーションイベントを明示的に指定する必要がある。
薄田達哉 / tatsuyasusukidaExtension Entry File
エクステンションのエントリーポイントのファイルでは activate と deactivate の 2 つの関数をエクスポートしている。
activate はエクステンションをインストール／有効化した時や VS Code の起動時などに呼び出されるようだ。
一方 deactivate はエクステンションをアンインストール／無効化した時や VS Code の終了時などに呼び出されるようだ、deactivate はエクステンションによっては何もしなかったり無かったりする。
薄田達哉 / tatsuyasusukidaおわりに
Get Started のチャプチャーを読み切ることができた。
次に読むべきは Extension Capabilities のようだ。
このチャプターではいくつかのカテゴリに分けて API やコントリビューションポイントを紹介してくれるようだ。
このチャプターくらいは一読してから何かを作ってみるのが良さそうだ。