vscode.devでは、ローカルで開発中の拡張機能をマーケットプレイスなどに公開することなく、実際にインストールして試すことができる。

仕組みとしては、ローカルサーバーでホストした拡張機能をlocaltunnelを使ってグローバルにアクセスできるようにし、それをvscode.devのDeveloper: Install Web Extensionコマンドによってサイドロードする、という流れになっている。

なお、localtunnelによるトンネリングに使うサーバーにはデフォルトでhttps://localtunnel.meが使われるようになっているが、自前でホストすることも可能。もちろんトンネリングには別のツールを使ってもいいのだが、VS Codeの公式ドキュメントで紹介されていたので、ここではそのままlocaltunnelを使うことにする。

方法

ローカルサーバーのポート番号としてここでは8080を使うことにする。

まずターミナルを一つ開いてローカルサーバーを立ち上げ拡張機能をホストする（ビルドが必要な場合あらかじめビルドしておく）:

npx serve --cors -l 8080

次に別のターミナルを開いてトンネリングを開始する:

npx localtunnel -p 8080

ここで発行される次のようなURLをコピーしてメモしておく:

your url is: https://hungry-mole-48.loca.lt/

まずURLブラウザでこのURLを開き、そこで表示される

Click to Continue

という青いボタンを、注意を読んだ上で押す。

あとはvscode.devのコマンドパレットから:

Developer: Install Web Extension...

を実行し、発行されたURLを入力欄にペーストしてEnterすると、拡張機能の読み込みが実行される。

参考リンク

• 公式ドキュメント: Web Extensions - Test your web extension in on vscode.dev
  • https://code.visualstudio.com/api/extension-guides/web-extensions#test-your-web-extension-in-on-vscode.dev