lisz-works

技術と興味の集合体

VSCode拡張開発!拡張のプロパティ値(設定値)を持つ方法!

【スポンサーリンク】

Visual Studio Code

VS Codeの拡張開発で、拡張のプロパティ値を持つ方法です!

設定画面などで設定しておいて、拡張がその値を使ってなにかしてくれるアレです。

今回は

  1. 持つ値を設定
  2. setting.jsonに設定を記述
  3. 実行すると拡張がその値を表示

ということをする流れです!

プロパティを追加する

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

「contributes」を探します。

この中に「configuration」という要素を追加します。

今回は試しに2パターンの要素を入れてみました。

  "contributes": {
    "commands": [
      // (中略)
    ],
    "configuration": {
      "type": "object",
      "title": "extensionName",
      "properties": {
        "hatenauploader.apikey": {
          "type": [
            "string",
            "null"
          ],
          "default": null,
          "description": "API Key setting"
        },
        "hatenauploader.general": {
          "type": "object",
          "default": {
            "userId": "your user ID",
            "apiKey": "your apikey"
          },
          "description": "hatena upload extension"
        }
      }
    }
  },

単一要素の場合

1つの独立した要素を追加する場合、このようにします。

"extensionname.apikey": {
  "type": [
    "string",
    "null"
  ],
  "default": null,
  "description": "API Key setting"
}

複数要素を持つ入れ子の場合

1要素内に、更に要素を持つ場合、このようにします。

"extensionname.general": {
  "type": "object",
  "default": {
    "userId": "your user ID",
    "apiKey": "your apikey"
  },
  "description": "general properties"
}

プロパティに値をセットする

設定画面やコマンドパレットから、プロパティを設定する方法がまだわからない……

ということで、setting.jsonから設定することとします。

setting.jsonを開く

F5で実行した状態で出てきたウィンドウを操作します。

コマンドパレット*1

setting.json

と入力し、

setting.jsonを開く

基本設定:設定(JSON)を開く
Preferences: Open Settings (JSON)

を選択します。

setting.jsonを編集

1番下に

"extensionname.apikey": "myApiKey",
"extensionname.general": {
    "userId": "generalUserName",
    "apiKey": "generalApiKey"
}

を追加します。

このとき、1番下の要素の末尾に「,」を入れることを忘れないよう注意しましょう。

こんな感じ。

// 略
    "xxxx": "yyyy", // ←このカンマ
    "extensionname.apikey": "myApiKey",
    "extensionname.general": {
        "userId": "generalUserName",
        "apiKey": "generalApiKey"
    }
}

保存して閉じます。

プロパティを使用する

処理ロジックが書かれている「extension.js」でプロパティ値を使用していきます。

今回はHello Worldを叩くと、プロパティを表示するメッセージが、右下に2パターン表示されるようにします。

let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {
  const conf = vscode.workspace.getConfiguration('extensionname')
  vscode.window.showInformationMessage('extensionname.apikey: ' + conf.get('apikey'));

  const confGeneral = vscode.workspace.getConfiguration('extensionname.general')
        vscode.window.showInformationMessage('extensionname.general > '
            + 'user ID: ' + confGeneral.get('userId')
            + ', API Key: ' + confGeneral.get('apiKey'));
});

実行する

F5で実行して、コマンドパレットから「Hello World」を実行します。

コマンドを実行

ちゃんと表示されましたね!

参考

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

code.visualstudio.com

あとがき

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

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

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

関連記事はこちら!

www.lisz-works.com

www.lisz-works.com

*1:F1 or Ctrl + Shift + P