はじめての VS Code 拡張機能開発
はじめに
VS Code の拡張機能開発についての記事です。
導入方法の解説とサンプルコードのデバッグまでを行います。
他の方の記事が古めだったので自分なりにまとめました。
基本的には公式サイトの手順に沿って行っています。
前提条件
-
Node.jsとGitがインストールされていること。 - この記事は
Windows環境で検証を行っています。
パッケージのインストール
はじめに Yeoman と VS Code Extension Generator というパッケージをインストールします。
Yeomanは「ヨーマン」と読み、ジェネレータ（雛形）を使ってプロジェクトを自動で生成するためのパッケージです。
VS Code Extension Generator は名前の通り、VS Code の拡張機能作成用のジェネレータです。
コマンドプロンプトからプロジェクトを作成したいフォルダに移動し、次のコマンドを実行します。
ダウンロードとインストールが終わるまでしばらく待ちます。
npm install -g yo generator-code
node のグローバルにインストールされたパッケージを確認します。
npm -g list
先ほどのパッケージが表示されればOKです。
C:\Users\UserName\AppData\Roaming\npm
+-- generator-code@1.7.7
`-- yo@4.3.1
プロジェクトの作成
次のコマンドで Yeoman を起動します。code で VS Code Extension Generator を指定しています。
npx yo code
開発対象の拡張機能を選択する画面が出ます。
上下キーで New Extension (TypeScript) を選択しエンターを押します。
以降、いろいろ質問されるので画面の指示通り答えていきます。
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? 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)
拡張機能の 表示用の名前 を訊かれますので入力します。ここでは My Extension とします。
? What's the name of your extension?
拡張機能の 個別に識別できる名前 を訊かれますので入力します。
（これは拡張機能のIDとなる名前ですが、公開しないのであればさほど気にしなくてよいです）
自動で my-extension と表示されますので、そのままエンターを押します。
? What's the identifier of your extension? (my-extension)
拡張機能の説明の入力です。ここでは未入力とし、そのままエンターを押します。
? What's the name of your extension?
Git のリポジトリを初期化するかどうか。ここでは n とします。
? Initialize a git repository? (Y/n)
ソースコードをWebpackでバンドルするかどうか。ここでは y とします。
? Bundle the source code with webpack? (y/N)
どのパッケージマネージャを使うか。ここでは npm とします。
? Which package manager to use? (Use arrow keys)
> npm
yarn
pnpm
自動でプロジェクトの生成と、パッケージのインストールが開始しますので、終わるまでしばらく待ちます。
成功すると以下のメッセージが表示されます。
Your extension my-extension has been created!
To start editing with Visual Studio Code, use the following commands:
code my-extension
Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.
To run the extension you need to install the recommended extension 'amodio.tsl-problem-matcher'.
For more information, also visit http://code.visualstudio.com and follow us @code.
最後に VS Code を起動するかどうかを訊かれるので、エンターを押して起動します。
? Do you want to open the new folder with Visual Studio Code? (Use arrow keys)
> Open with `code`
Skip
プロジェクトを開く
VS Code が開いたら、デバッグに必要な以下の拡張機能をインストールしておきます。
拡張機能(Ctrl+Shift+P)の検索フォームから、文字列 amodio.tsl-problem-matcher をペーストして検索します。
ファイルの構成
ポイントとなる部分についてのみ説明します。
package.json に拡張機能の情報が書かれています。
name, displayName, description は先ほど入力した情報になり、必要に応じて書き換えます。
contributes 要素内に追加する機能の情報を書きます。
ここでは Hello World という名前で、コマンド my-extension.helloWorld を定義しています。
{
"name": "my-extension",
"displayName": "My Extension",
"description": "",
"version": "0.0.1",
"engines": {
"vscode": "^1.79.0"
},
"categories": [
"Other"
],
"activationEvents": [],
"main": "./dist/extension.js",
"contributes": {
"commands": [
{
"command": "my-extension.helloWorld",
"title": "Hello World"
}
]
},
(省略)
src/extension.ts に拡張機能の処理内容が書かれています。
activate メソッドはコマンドが初めて呼ばれたとき（アクティブ化されたとき）に実行されます。
registerCommand メソッドを呼び出し、package.json に記述したコマンドを登録します。
アロー関数式内ではコマンドが呼ばれた際の処理を記述しています。
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
console.log('Congratulations, your extension "my-extension" is now active!');
let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
vscode.window.showInformationMessage('Hello World from My Extension!');
});
context.subscriptions.push(disposable);
}
export function deactivate() {}
サンプルの実行
初期の状態で、既に動かせるソースコードが入っていますので動かしてみましょう。
F5 を押してデバッグを実行します。
すると、新たに VS Code のウィンドウが開きます。
新しいウィンドウの方で、コマンドパレット(Ctrl+Shift+P またはメニューバーの表示から選択)を開き、helloと入力します。
候補に「Hello World」が表示されるので、選択してエンターを押します。
画面右下にポップアップでメッセージが表示されれば成功です。
Discussion