のらてつの雑記帳

VSCode拡張機能開発ノート / 2

9 コメント

views

0 フォロー

コマンド登録

（activate関数の中で実行する）
詳細→Commands | Visual Studio Code Extension API

基本形

// コマンド登録の基本形はこの形
vscode.commands.registerCommand('hoge.foo', () => { console.log('コマンド実行'); });

オブジェクトにまとめてみる

コマンドを沢山作るとなると一箇所で管理できたほうがいい気がする。
Tree Viewでコマンド登録することがあるので、コマンド名を直に打たないで変数にしておいたほうが把握しやすい。

const command = {
  foo: {
    name: 'hoge.foo',
    func() {
      console.log('コマンド実行');
    }
  },
}

vscode.commands.registerCommand(command.foo.name, command.foo.func);

ラッパーを作ってみる

処理を簡単にする関数を作る。

const registerCommand = (data: { name: string, func: () => void }) => vscode.commands.registerCommand(data.name, data.func);

registerCommand(command.foo);

ソース表示通報 ...

コマンドをコマンドパレットから呼び出せるようにする

package.jsonの編集

予めpackage.jsonにコマンドを書いておく必要がある。

{
  // 前後に色々ある

  "contributes": {
    "commands": [
      {
        "command": "hoge.foo",
        "title": "コマンド実行テスト"
      }
    ],

  // 前後に色々ある
}

extension.tsの記述

その上で、extension.tsのactivate関数の中に以下の形で記述。
なおregisterCommand関数とcommandオブジェクトは>> 2で作ったもの。こうするのが一般的というのではない。

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(registerCommand(command.foo));
}

例に普通書かれているのはこうとか↓

context.subscriptions.push(vscode.commands.registerCommand('hoge.foo', () => { console.log('コマンド実行'); }));

こう↓

const command = 'hoge.foo';
const commandHandler = () => { console.log('コマンド実行'); };
context.subscriptions.push(vscode.commands.registerCommand(command, commandHandler));

タグリスト