VSCode の Azure 拡張機能のコードを解析してみる

VS Code で使える Azure 拡張機能の Azure Resource Groups がどうやって作られているか、 GitHub に上がっているコードを解析してみた結果です。 VS Code で Azure の拡張機能を作るときの参考にしてください。

コード以外の部分 (E.g. 拡張機能の Hello World や、 Marketplace へのデプロイなど) は、この記事では説明せず、参考リンクを記事の最後に記載しておきます。

解析するもの

リポジトリ

microsoft/vscode-azureresourcegroups: VS Code extension for managing Azure resource groups.

解析結果

Azure 拡張機能の中で一番シンプルな拡張機能の解析にしてありますが、他の App Service 拡張機能なども同じような作りになっているので、一つわかれば大体わかると思います。

パッケージの依存関係

• devDependencies
  • vscode-azureextensiondev
• dependencies
  • vscode-azureextensionui
  • @azure/ms-rest-js
  • @azure/arm-resources
• extensionDependencies
  • ms-vscode.azure-account

vscode-azureextensiondev: テストや Webpack で利用しています。アイコンの共有リソースもここにあるため、ここからコピペで取ってきています。

vscode-azureextensionui: TreeView を作るためのコンポーネントと、エラーハンドリング用のテレメトリ機能が含まれています。

@azure/arm-resources: Azure Resouce Manager の SDK です。 Azure のサービスごとにほぼ全て SDK があるため、使いたい機能ごとに import しています。
例えば他には @azure/arm-appservice - npm や、 @azure/arm-consumption - npm などといったものがあります。

package.json の設定

このあたりが必要なものになります。全部書くと長くなりすぎるので中身はほぼ省略しています。

{
  "aiKey": "AIF-d9b70cd4-b9f9-4d70-929b-a071c400b217",
  "activationEvents": [...],
    "contributes": {
        "commands": [...],
        "viewsContainers": {
            "activitybar": [
                {
                    "id": "azure",
                    "title": "Azure",
                    "icon": "resources/azure.svg"
                }
            ]
        },
        "views": {
            "azure": [
                {
                    "id": "azureResourceGroups",
                    "name": "Resource Groups"
                }
            ]
        },
        "menus": {
            "view/title": [...],
            "view/item/context": [...],
            "commandPalette": [...]
        },
    },
},

コード階層

• main.js
• resources
• src
  • extension.ts
  • extensionVariables.ts
  • commands
  • tree
  • utils
• test

main.js: 拡張機能のエントリーポイント (main) 。VS Code 拡張機能で作るときの extension.ts をラップしたものです。

resources: 拡張機能に使うリソース置き場。 README の説明画像などもここです。

src/extension.ts: エントリーポイントからコールされる一連の初期化コードです。ここからコマンドやツリー初期化用のコードをコールしています。

src/extensionVariables.ts: エントリーポイントで初期化する必要のある拡張機能グローバルな変数です。ここで定義したものを使って拡張機能を作っていきます。

src/commands: 拡張機能のツリー右クリックや、コマンドパレットに出てくるコマンドなどの実装を定義したものです。

src/tree: Azure の TreeView を定義したものです。 AzureAccountTreeItem と SubscriptionTreeItem を作って、そのあとに ResourceGroupTreeItem > ResourceTreeItem と続くツリーを作っています。
拡張機能を作るときに AzureAccountTreeItem と SubscriptionTreeItem は必須になっていて、そのあとに置きたいツリーの AzureParentTreeItem または AzureTreeItem を extends した自作クラスを置くようになっています。

utils: 便利ツールです。 vscode-azureextensiondev の vscode-azuretools/ui/src/utils at main · microsoft/vscode-azuretools にも似たようなものがあったので、おそらくここからコピペして持ってきているのだと思います。
Azure Resource Groups 拡張機能は少し古いためか完全なコピペではないですが、 App Service 拡張機能などはほぼコピペしたものが入っていました。

トラブルシューティング

registerUIExtensionVariables(ext); メソッドをコールするとテレメトリエラーになる。

package.json の aiKey に "AIF-" を入力してください。

デバッグ情報を VS Code に出したい。

.vscode/launch.json に env を設定してください。こんな感じで Debug Console に表示されるようになります。

{
"version": "0.2.0",
"configurations": [
  {
    ...
    "env": {
      "DEBUGTELEMETRY": "v",
      "NODE_DEBUG": ""
  }
}

参考

• SDK の一覧: Azure SDK for JavaScript | Azure SDK for JS
• VS Code 拡張機能の作り方: Your First Extension | Visual Studio Code Extension API
• VS Code 拡張機能のデプロイ方法: Publishing Extensions | Visual Studio Code Extension API
• VS Code 拡張機能のサンプル一覧: microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.