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を押して、実行します。
テスト用画面が出てくるので、次のように操作します。
- F1かCtrl+Shift+Pでコマンドパレットを開く
- 「hi」と入力
- 「hi lw」が出てくるのでEnter
今回は「hi lw」というコマンドを追加したので、コレを実行します。
入力途中でコマンドが表示されたりフォーカスされたりしたら、それをEnterすればOK。
Hello world同様、VS Codeの右下にメッセージが表示されます。
成功です!
参考
コチラを参考にしました。ありがとうございました!
あとがき
VS CodeのHelloWorldにコマンドを追加する方法についてでした!
ちょっといじるだけで追加できました!
これでコマンドを色々追加できそうです……
関連記事はこちら!