Public Theta Blog

`vscode.dev`に開発中の拡張機能をローカルから読み込む

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

仕組みとしては、ローカルサーバーでホストした拡張機能をlocaltunnelを使ってグローバルにアクセスできるようにし、それをvscode.devDeveloper: 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すると、拡張機能の読み込みが実行される。

参考リンク