lisz-works

プログラミングと興味を貴方に

VSCode拡張開発!コマンドを追加する方法

【スポンサーリンク】

Visual Studio Code

VS Codeの拡張開発を!

ということで、Hello Worldへの追加で新しいコマンドを追加してみました!

コレができるようになれば、開発するにあたって、コマンドの追加・削除をすることができますね!

package.jsonを編集

package.jsonという、プラグイン定義ファイルを編集します。

「実行するコマンドを追加」

「activationEvents」を探します。

元のファイルはこのように書かれています。

  "activationEvents": [
    "onCommand:extension.helloWorld"
  ],

そこに「"onCommand:extension.testlw"」というのを追加します。

  "activationEvents": [
    "onCommand:extension.helloWorld",
    "onCommand:extension.testlw"
  ],

「onCommand」というのが、「コマンド実行したとき」という意味です。

その:の先にある、「extension.xxx」がコマンドごとの識別文字列……IDみたいなものですかね。

「このコマンドはどんなとき実行するのか」

「contributes」を探します。

これは

ここで指定するのは、どのような時に、拡張機能を実行するのか指定します。 引用: https://qiita.com/rma/items/8c53077d1355ab8fa4c6

とのこと。

元ファイルはこのように書かれています。

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

これにさきほど追加した「extension.testlw」というコマンドについてを追加します。

  "contributes": {
    "commands": [
      {
        "command": "extension.helloWorld",
        "title": "Hello World"
      },
      {
        "command": "extension.testlw",
        "title": "hi lw"
      }
    ]
  },

extension.js

ここにはコマンドが実行されたときの、実処理を書きます。

activate()内に、この処理

// ここから追加 ----->
let lwdisposable = vscode.commands.registerCommand('extension.testlw', function () {
  vscode.window.showInformationMessage('Hi lw!');
});

context.subscriptions.push(lwdisposable);
// <--- ここまで追加

を追加します。

function activate(context) {

    // 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 "hatenauploader" 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('extension.helloWorld', function () {
        // 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!');
    });

    context.subscriptions.push(disposable);

  // ここから追加 ----->
    let lwdisposable = vscode.commands.registerCommand('extension.testlw', function () {
        vscode.window.showInformationMessage('Hi lw!');
    });

    context.subscriptions.push(lwdisposable);
  // <--- ここまで追加
}

これで「Hi lw!」という文字列が表示されるように設定できます。

実行

それでは実行してみましょう。

プロジェクト側でF5を押して、実行します。

コマンドパレット

テスト用画面が出てくるので、次のように操作します。

  1. F1かCtrl+Shift+Pでコマンドパレットを開く
  2. 「hi」と入力
  3. 「hi lw」が出てくるのでEnter

今回は「hi lw」というコマンドを追加したので、コレを実行します。

実行

入力途中でコマンドが表示されたりフォーカスされたりしたら、それをEnterすればOK。

Hello world同様、VS Codeの右下にメッセージが表示されます。

実行結果

成功です!

参考

コチラを参考にしました。ありがとうございました!

qiita.com

あとがき

VS CodeのHelloWorldにコマンドを追加する方法についてでした!

ちょっといじるだけで追加できました!

これでコマンドを色々追加できそうです……

関連記事はこちら!

www.lisz-works.com