Wood-Roots:blogHOMEツール/エディタ202002/14【VSCode】サイドバーランチャー的な拡張機能をつくるツール/エディタVSCodeのサイドバーに表示してランチャー的にいろいろな機能を実行できる拡張機能を作成しましたので作成手順をご紹介します。いうものかについては下記動画をご覧ください。https://wood-roots.com/wp-content/uploads/2020/02/sidebar.mp4VSCodeは多機能で拡張機能もたくさんあるのはいいのですが、機能が多すぎてショートカットやコマンド名を覚えるのが大変です。そこでよく使う機能の実行や定型文の挿入などを1クリックで実行できないかと思い作成してみました。自分用なのでマーケットプレイスへ公開する予定はありませんが、なかなか便利だと思います。VSCode拡張機能の基本的な作り方や最低限の流れは前回の記事をご参照ください。【VSCode】ステータスバーに今ラジオでかかっている曲名を表示する拡張機能コード全文はGithubで公開しています。ADspackage.jsonの編集contributes配下にviewsContainersという項目を作り、必要な項目を記載するとVSCodeのサイドにアイコンが追加され、専用のビューを作ることができます。記述内容は公式ドキュメントをご参照ください。言いたいところですが、ドキュメントがとにかく読みにくいのでGithubのサンプルを見たほうがマシです。MSも新しい取り組みをいろいろやっていて素晴らしいと思いますが、ここだけは変わってない...。[]},extension.jsサイドバーにアイコンとその中身のビューが追加されましたが、その中身をつくらないといけません。extension.jsでツリービューの中身で定義します。activateactivateはプラグイン実行時(=VSCode起動時)に実行される関数です。その中でregisterTreeDataProviderという関数を実行すると、ツリービューの中身を定義することができます。引数にpackage.jsonで指定したID(view直下のid)、第二引数に後ほど定義するインスタンスを指定します。vscl);}registerTreeDataProviderで指定したクラス(上記の例ではvsclauncherView)はgetTreeItemとgetChildrenの2つの関数が必要です。element;}}データの定義getTreeItemとgetChildrenを書く前に、ツリービューの中身であるJSONを定義します。今回はシンプルなJSONを定義し、後ほどツリービュー用に書き換えて使うという方法を取りました。公開する拡張機能ならsettings.jsonに持たせるほうが望ましいですが、今回は自分用なのでvsclauncherViewクラス内でベタに書いています。commandはクリックされたときに実行される関数で、後ほど定義します。'vsclauncherView.showMessage'}]}]}];}ツリーの構築ツリーの各要素はTreeItemというオブジェクトである必要があります。先ほど定義したJSONをループで回してTreeItemに変換します。tree;}TreeItemはvscode.TreeItemから拡張したクラスで、labelやcommand、iconPathという持たないといけない属性を持たせる処理を足しています。今回は自分で定義したJSONなので大した操作は必要ありませんが、APIなどで外部から取得する場合はもっと細かな操作が必要かもしれません。super()の部分が見慣れない記述ですが、第一引数がツリーの表記、第二引数が折り畳みができるかどうかの指定になります。ここでは子要素(children)の有無で判定しています。data.children;}}ツリーの表示ツリービューで必須となるgetTreeItemとgetChildrenを書きます。今回は子要素はそのまま出すだけなのでgetTreeItemは引数をそのまま返します。getChildrenは前述のTreeItemを返します。element.children;}クリックしたときに実行する関数の定義dataのcommandで名前だけ指定していた関数の定義を行います。拡張機能内の関数はactivate内でvscode.commands.registerCommandという関数で実行できるように定義する必要があります。引数がID名(「views内のID.関数のID」となる)、第二引数が関数名です。ここではvsclauncherViewクラス内で定義しました。vscl.insertTxs);}たとえば、ツリーをクリックすると「あいうえお」を挿入する処理は以下になります。'あいえうお');});}}これぐらいなら拡張機能で用意する必要はありませんが、マクロ的に動かしたり他の拡張機能を実行したりと複雑な処理になればなるほどランチャーとして価値あるものになってきます。まとめVSCodeの拡張機能はビルド環境まで提供されているため、比較的容易に作成することができます。ドキュメントの見づらさだけがネックですが、サンプルは充実しています。VSCodeユーザーの方はぜひ挑戦してみてください。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイトCommentsコメントはまだありません。2Archive2020年92019年182018年102017年172016年202015年212014年312013年552012年50SearchSocialAboutWeb制作会社ではたらく社畜のアウトプットです。Web制作技術のほか、雑記など。当ブログと運営者についてもっと詳しく見るプライバシーポリシーContactお問い合わせは下記フォームをご利用ください。お時間がございましたらお問い合わせの前にこちらをご一読いただけますと幸いです。Wood-Roots:blog。