VS Codeの拡張開発で、拡張のプロパティ値を持つ方法です!
設定画面などで設定しておいて、拡張がその値を使ってなにかしてくれるアレです。
今回は
- 持つ値を設定
- setting.jsonに設定を記述
- 実行すると拡張がその値を表示
ということをする流れです!
プロパティを追加する
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
と入力し、
基本設定:設定(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」を実行します。
ちゃんと表示されましたね!
参考
コチラを参考にしました。ありがとうございました!
あとがき
VS CodeのHelloWorldにコマンドを追加する方法についてでした!
ちょっといじるだけで追加できました!
これでコマンドを色々追加できそうです……
関連記事はこちら!
*1:F1 or Ctrl + Shift + P