VSCode拡張機能の環境構築～リリース

はじめに

VSCode拡張機能を環境構築～リリースする機会があったので、備忘録として残します

環境構築

ひな型生成ツールの「Yeoman」をインストール

$ npm install -g generator-code

yo codeで、ひな形生成

$ npx yo code

色々聞かれるので、適宜回答

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

ひな形説明

src配下のextension.tsのactivate(context: vscode.ExtensionContext)が、mainになります。
ひな形のままだと、sample.helloWorldのコマンドで、'Hello World from sample!'のメッセージが出力される処理となります

// 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
	const 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 from sample!');
	});

	context.subscriptions.push(disposable);
}

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

package.jsonのcommandsが、拡張機能を実行するコマンド定義になります

"contributes": {
    "commands": [
      {
        "command": "sample.helloWorld",
        "title": "Hello World"
      }
    ]
}

開発

テキストファイル内でEnterキーを押した場合に、メッセージが出力されるようコマンドを追加
既存のcommandsは削除

"contributes": {
    "commands": [
      {
        "command": "sample.inputEnter",
        "title": "Hello with Input Enter"
      }
    ],
    "keybindings": [
      {
        "command": "sample.inputEnter",
        "key": "enter",
        "when": "editorTextFocus"
      }
    ]
}

activeteに処理を追加
既存の処理は削除

export function activate(context: vscode.ExtensionContext) {
	context.subscriptions.push(
		vscode.commands.registerCommand('sample.inputEnter', () => {
			vscode.window.showInformationMessage('Hello');
		})
	);
}

デバッグ

Ctrl+Shift+Dを入力後、F5を入力するとデバッグが開始されます
別ウィンドウでVSCodeが開き、ファイル内でEnterキーを入力すると、以下のメッセージが出力されます

Ctrl+Shift+Pでコマンドパレットを開くと、先ほどpackage.jsonで定義したコマンドが表示されます
ここでもコマンドを実行できますが、Enterキーを入力しても実行できるように先ほどpackage.jsonでkeybindingsを定義しました

リリース準備

• 未登録の人は、以下でパブリッシャー登録
  https://marketplace.visualstudio.com/manage/
• PJ直下のREADME.mdは、ユーザから見える概要になるので、適宜整備してください
• PJ直下にxxx.pngを配置すると、拡張機能のアイコンになります
  その際、package.jsonに以下を定義してください
  "icon": "xxx.png"
• package.jsonに以下を定義してください
  　"publisher": "xxxxx"

package.jsonには、"displayName","keywords"など、リリースする際に必要な情報があるので、適宜追加してください

package.jsonに記載する"publisher": "xxxxx"と、marketplaceのPublisherIdは同じじゃないとリリースする際にエラーになるので注意

リリース

vsce CLIをインストール

$ npm install -g @vscode/vsce

パッケージ作成
完了すると、PJ直下に.vsixファイルが作成されます

$ vsce package

登録後、MarketPlaceにサインインし、「New extension」から、先ほど作成した.vsixをアップロード
自分は、アップロードしてから10分位待つと、公開されました

CLIからでもリリースできますが、今回は割愛します