【ツール/エディタ】【VSCode】サイドバーランチャー的な拡張機能をつくる | Wood-Roots:blog

2020
02/14

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

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

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

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

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

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

ADs

package.jsonの編集

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    "contributes": {
        "viewsContainers": {
            "activitybar": [
                {
                    "id": "vsclauncher",<--ここのIDが
                    "title": "VSCランチャー",
                    "icon": "media/icon.svg"
                }
            ]
        },
        "views": {
            "vsclauncher": [ <--ここと同じにする
                {
                    "id": "vsclauncherView", <--ここは上のIDと被らないようにする
                    "name": "VSCランチャー"
                }
            ]
        },
        "commands": []
    },

extension.js

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

activate

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

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

1
2
3
4
5
function activate(context) {
    //ツリーペインを生成する
    const vscl = new vsclauncherView();
    vscode.window.registerTreeDataProvider('vsclauncherView', vscl);
}

registerTreeDataProviderで指定したクラス（上記の例ではvsclauncherView）はgetTreeItemとgetChildrenの2つの関数が必要です。

1
2
3
4
5
6
7
8
9
10
11
12
13
class vsclauncherView {
    constructor() {
    //初期値などを定義
    }
    getTreeItem(element) {
    //ツリーの最小単位を返す
    return element;
    }
    getChildren(element) {
    //ツリーの親を返す
    return element;
    }
}

データの定義

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    data() {
        return [{
            title: '文字列の挿入',
            icon: {
                dark: __filename + '../../media/case-sensitive.svg',
                light: __filename + '../../media/case-sensitive.svg',
            },
            children: [{
                title: 'あいうえお',
                command: 'vsclauncherView.insertTxs',
            }, {
                title: 'かきくけこ',
                command: 'vsclauncherView.insertIms',
            }]
        }, {
            title: '親',
            icon: {
                dark: __filename + '../../media/vm.svg',
                light: __filename + '../../media/vm.svg',
            },
            children: [{
                title: '子',
                children: [{
                    title: '孫',
                    command: 'vsclauncherView.showMessage'
                }]
            }]
        }];
    }

ツリーの構築

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

1
2
3
4
5
6
7
8
9
10
11
    generateTree(data) {
        let self = this;
        let tree = data;
        Object.keys(tree).forEach(function (i) {
            tree[i] = new TreeItem(tree[i]);
            if (tree[i].children !== undefined) {
                self.generateTree(tree[i].children);
            }
        });
        return tree;
    }

TreeItemはvscode.TreeItemから拡張したクラスで、labelやcommand、iconPathという持たないといけない属性を持たせる処理を足しています。

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
class TreeItem extends vscode.TreeItem {
    constructor(data) {
        super(data.title, data.children === undefined ? vscode.TreeItemCollapsibleState.None : vscode.TreeItemCollapsibleState.Expanded);
        this.label = data.title;
        this.command = {
            title: data.title,
            command: data.command,
        };
        this.iconPath = data.icon;
        this.children = data.children;
    }
}

ツリーの表示

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

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

1
2
3
4
5
6
7
8
9
10
11
    getTreeItem(element) {
        return element;
    }
    //ツリーを生成
    getChildren(element) {
        if (element === undefined) {
            return this.generateTree(this.data());
        }
        return element.children;
 
    }

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

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

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

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

1
2
3
4
function activate(context) {
    //コマンドの定義
    vscode.commands.registerCommand('vsclauncherView.insertTxs', vscl.insertTxs);
}

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

1
2
3
4
5
6
7
8
    insertTxs() {
        let editor = vscode.window.activeTextEditor;
        if (editor) {
            editor.edit(function (editBuilder) {
                editBuilder.insert(editor.selection.active, 'あいえうお');
            });
        }
    }

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

まとめ

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

ADs

Related Articles関連記事

Post Comments

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

Comments

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

Category

Archive

Search

Social