2020
02/14

【VSCode】サイドバーランチャー的な拡張機能をつくる

VSCodeのサイドバーに表示してランチャー的にいろいろな機能を実行できる拡張機能を作成しましたので作成手順をご紹介します。

どういうものかについては下記動画をご覧ください。

VSCodeは多機能で拡張機能もたくさんあるのはいいのですが、機能が多すぎてショートカットやコマンド名を覚えるのが大変です。そこでよく使う機能の実行や定型文の挿入などを1クリックで実行できないかと思い作成してみました。
自分用なのでマーケットプレイスへ公開する予定はありませんが、なかなか便利だと思います。

VSCode拡張機能の基本的な作り方や最低限の流れは前回の記事をご参照ください。
【VSCode】ステータスバーに今ラジオでかかっている曲名を表示する拡張機能

コード全文はGithubで公開しています。

ADs

package.jsonの編集

contributes配下にviewsContainersという項目を作り、必要な項目を記載するとVSCodeのサイドにアイコンが追加され、専用のビューを作ることができます。

記述内容は公式ドキュメントをご参照ください。

と言いたいところですが、ドキュメントがとにかく読みにくいのでGithubのサンプルを見たほうがマシです。

MSも新しい取り組みをいろいろやっていて素晴らしいと思いますが、ここだけは変わってない…。

extension.js

サイドバーにアイコンとその中身のビューが追加されましたが、その中身をつくらないといけません。
extension.jsでツリービューの中身で定義します。

activate

activateはプラグイン実行時(=VSCode起動時)に実行される関数です。
その中でregisterTreeDataProviderという関数を実行すると、ツリービューの中身を定義することができます。

第一引数にpackage.jsonで指定したID(view直下のid)、第二引数に後ほど定義するインスタンスを指定します。

registerTreeDataProviderで指定したクラス(上記の例ではvsclauncherView)はgetTreeItemgetChildrenの2つの関数が必要です。

データの定義

getTreeItemgetChildrenを書く前に、ツリービューの中身であるJSONを定義します。

今回はシンプルなJSONを定義し、後ほどツリービュー用に書き換えて使うという方法を取りました。
公開する拡張機能ならsettings.jsonに持たせるほうが望ましいですが、今回は自分用なのでvsclauncherViewクラス内でベタに書いています。

commandはクリックされたときに実行される関数で、後ほど定義します。

ツリーの構築

ツリーの各要素はTreeItemというオブジェクトである必要があります。
先ほど定義したJSONをループで回してTreeItemに変換します。

TreeItemvscode.TreeItemから拡張したクラスで、labelcommandiconPathという持たないといけない属性を持たせる処理を足しています。

今回は自分で定義したJSONなので大した操作は必要ありませんが、APIなどで外部から取得する場合はもっと細かな操作が必要かもしれません。

super()の部分が見慣れない記述ですが、第一引数がツリーの表記、第二引数が折り畳みができるかどうかの指定になります。

ここでは子要素(children)の有無で判定しています。

ツリーの表示

ツリービューで必須となるgetTreeItemgetChildrenを書きます。

今回は子要素はそのまま出すだけなのでgetTreeItemは引数をそのまま返します。
getChildrenは前述のTreeItemを返します。

クリックしたときに実行する関数の定義

dataのcommandで名前だけ指定していた関数の定義を行います。

拡張機能内の関数はactivate内でvscode.commands.registerCommandという関数で実行できるように定義する必要があります。

第一引数がID名(「views内のID.関数のID」となる)、第二引数が関数名です。
ここではvsclauncherViewクラス内で定義しました。

たとえば、ツリーをクリックすると「あいうえお」を挿入する処理は以下になります。

これぐらいなら拡張機能で用意する必要はありませんが、マクロ的に動かしたり他の拡張機能を実行したりと複雑な処理になればなるほどランチャーとして価値あるものになってきます。

まとめ

VSCodeの拡張機能はビルド環境まで提供されているため、比較的容易に作成することができます。
ドキュメントの見づらさだけがネックですが、サンプルは充実しています。
VSCodeユーザーの方はぜひ挑戦してみてください。

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。