VSCode 拡張開発入門② ~コマンドを登録してみる~

May 23, 2020

この記事は1年以上が経過しています。内容が古い可能性があります。

import * as vscode from "vscode"
// ①activate・deactivate
export function activate(context: vscode.ExtensionContext) {
  //②
  let disposable = vscode.commands.registerCommand(
    "extension.helloWorld",
    () => {
      vscode.window.showInformationMessage("Hello World")
    }
  )
  //③
  context.subscriptions.push(disposable)
}
// ①activate・deactivate
export function deactivate() {}

初期状態のextension.tsです。(※初期生成時に追加されているコメントは削除しています)

① activate と deactivate について

activate は、package.jsonのactivationEventsに記載したイベンドで発火する関数です。

deactivate は VSCode 終了時に呼ばれる関数で、クリーンアップに使用します。

② コマンドの処理実装

registerCommand 関数を使用してコマンド実行時の処理を記述します。

vscode.commands.registerCommand('コマンド名', () => {
    // コマンド実行時の処理を記載する
})

③ コマンド処理を登録する

contextのsubscriptionsに先ほど作ったコマンドの処理を登録します。

context.subscriptions.push(コマンド処理);

とすることで、コマンド実行時に処理が発火します。

Bye のコマンド処理を実装する

コマンドから処理を実行する場合、vscode.commands.registerCommandにコマンドと処理を記述し、context.subscriptionsに push すればいいことがわかりました。

Bye のコマンド処理を追加してみます。

src/extension.tsに実装します。

export function activate(context: vscode.ExtensionContext) {
    ...
	let bye = vscode.commands.registerCommand('bye', () => {
		vscode.window.showInformationMessage('Good bye!');
	});
	context.subscriptions.push(bye);
}

コマンドの登録

これで終わりではなく、package.jsonにコマンドの登録が必要です。

package.json

{
...
  //①
  "activationEvents": [
    "onCommand:extension.helloWorld",
    "onCommand:bye" //追加
  ],
  //②
  "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "Hello World"
      },
      //追加
      {
        "command": "bye",
        "title": "Bye!"
      }
    ]
  },
...
}

① activationEvents

activate 関数が呼ばれるイベントを設定します。

今回はコマンドから実行なのでonCommandを使用します。

その他のイベントについては、Activation Events | Visual Studio Code Extension APIに詳しく記載されています。

② commands

続いて、コマンドの登録をします。

{
  "command": "bye",
  "title": "Bye!"
}

command には、先ほどonCommand:{ID}で指定した ID を指定します。

title は、コマンド一覧に表示される名称です。

実行してみる

前回同様、デバックアイコン(もしくは F5)から起動します。

cmd + Shift + pでBye!を選択すると、info にGood bye! が表示されます。

Alt text

Garbanzo Note