VSCode拡張機能開発はじめの備忘録

これは？

VSCodeの拡張機能開発の環境づくり。
導入からデバッグ実行、パッケージングまで。

Node.js の導入

nvm の導入

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
$ nvm --version
$ node -v
0.35.2

node の導入

$ nvm install --lts
$ nvm use --lts
v16.17.0

テンプレートからプロジェクト雛形を生成する

$ npm install -g yo generator-code
$ npx yo code

yo code を実行するとプロジェクト名や何を作るかなど色々聞かれるので適切に答えていく。
今回は TypeScriptによる拡張機能の開発を選択。

注意するのは Do you want to open the new folder with Visual Studio Code? と聞かれた際に
"Open with code" を選択しておくこと。
後で自分で開いても良いが、ここで開いておくと後々デバッグ実行が楽。
すべて終わると、以下のようなディレクトリ構成が生成される

|--.eslintrc.json
|--.gitignore
|--.vscode
|  |--extensions.json
|  |--launch.json
|  |--settings.json
|  |--tasks.json
|--.vscodeignore
|--CHANGELOG.md
|--README.md
|--node_modules/
|--package-lock.json
|--package.json
|--src
|  |--extension.ts
|  |--test
|  |  |--runTest.ts
|  |  |--suite
|  |  |  |--extension.test.ts
|  |  |  |--index.ts
|--tsconfig.json
|--vsc-extension-quickstart.md

主に編集していくのは src/extensions.json
デフォルトだと以下の状態になっている

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
	
	// Use the console to output diagnostic information (console.log) and errors (console.error)
	// This line of code will only be executed once when your extension is activated
	console.log('Congratulations, your extension "sample" is now active!');

	// The command has been defined in the package.json file
	// Now provide the implementation of the command with registerCommand
	// The commandId parameter must match the command field in package.json
	let disposable = vscode.commands.registerCommand('sample.helloWorld', () => {
		// The code you place here will be executed every time your command is executed
		// Display a message box to the user
		vscode.window.showInformationMessage('Hello World sample!');
	});

	context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
export function deactivate() {}

デバッグ

VScode上にてF5でデバッグ実行するだけ。
新しくVScodeウィンドウが立ち上がるので、そのウィンドウにて動作を確認する。
初期のままだと F1 で開くメニューに Hello World が追加されているので、実行して右下にHelloWorld的なポップアップが登場すれば成功。

ここでうまくいかない場合は、ビルドが通っていない可能性がある。
ビルド生成物は out ディレクトリに生成されるので、初回デバッグ実行時に outが存在しない場合は、ビルド失敗。
WSL上で環境を構築したが、エクスプローラー上から直接フォルダをVSCodeで開くなどして環境が異なると起こるようである。
プロジェクト生成の yo code 時の "Open with code" で開いたwindowで素直に実行したほうが良いかもしれない。

パッケージング

ジェネレータで生成されたプロジェクトテンプレートに含まれる README.md の最初の一節

# sample README

This is the README for your extension "sample". After writing up a brief description, we recommend including the following sections.

この３行目を変更しておかないとパッケージングにてエラーになるので変更しておく。

$ npm install vsce --save-dev
$ npx vsce package

これで vsix ファイルが生成される

インストール

出来上がった vsix ファイルは以下のようにインストールできる

code --install-extension sample.vsix

参考

• https://code.visualstudio.com/api/get-started/your-first-extension