VS Codeのエージェントモードを拡張するには、を試してください！

リモート開発がさらに向上

2022年12月7日 ブリジット・マータフ, @BrigitMurtaugh

Visual Studio Code の核心はコードエディターであり、リモート開発体験を通じて他の環境と統合することで、さらに強力かつ柔軟になります

Spectrum of remote development options

あまり意識しないかもしれませんが、VS Code には組み込みのコマンドラインインターフェイス (CLI) があり、エディターの起動と管理方法を制御できます。コマンドラインオプションを通じて、ファイルを開いたり、拡張機能をインストールしたり、診断情報を出力したりできます

Output of code CLI

CLI は VS Code Desktop を使用するワークフローで非常に便利ですが、ギャップがありました。つまり、CLI でリモートインスタンスを起動できなかったのです。そこで、ローカルとリモートを近づけることでこのギャップを修正し、CLI をさらに強力にしたいと考えました。

本日、VS Code の起動と、VS Code Desktop または vscode.dev からリモートでマシンに接続できる強化された code CLI を発表できることを嬉しく思います。更新された CLI は最新の VS Code リリースに組み込まれており、スタンドアロンインストールも可能です。そのため、VS Code Desktop をインストールできないマシンであっても、任意のコンピューターへのセキュアな接続を作成し、リモートで接続できます。

新しい CLI に加えて、リモート開発を改善するために以下の更新を行いました

  • VS Code UI から直接トンネルを有効にできます。
  • トンネリングはプライベートプレビューではなくなり、誰でもサインアップなしでトンネルを作成および使用できます。
  • 2つのリモート拡張機能の名前を変更し、それらがどのように機能し、どこで開発に役立つかをより明確にしました
    • 「Remote - WSL」拡張機能は、単にWSL となりました。
    • 「Remote - Containers」拡張機能は、開発環境の作成に使用されることを反映して、Dev Containers に名前が変更されました。

1つのツールから、どこへでもトンネル接続

トンネリングは、データをあるネットワークから別のネットワークへ安全に送信します。SSH や HTTPS を設定する手間をかけずに (必要であればそれらもできますが 😊)、VS Code デスクトップまたはウェブクライアントから任意の選んだマシンに対して開発を行うために、セキュアなトンネルを使用できます。

VS Code からリモートマシンへのトンネリングには、2つの素晴らしいオプションがあります

  • 新しい、強化された code CLI を使用します。
  • VS Code UI から直接トンネリングを有効にします。

以下のセクションで、両方のオプションについて詳しく説明します。

強化された code CLI

VS Code Server をリリースした際、code CLI に統合するという長期的なビジョンを述べました。これを実現し、さらに、VM やロックダウンされたマシンで VS Code Desktop をインストールできない場合のために、スタンドアロンインストールも可能にしました。

以下は、code CLI をインストールし、それを使ってセキュアなトンネルを作成する手順です。VS Code Server のプライベートプレビューを試したことがある場合、手順は非常に似ています。

注: VS Code Server のプライベートプレビュー中にスタンドアロンの code-server CLI を使用していた場合、今後は最新の code CLI (最新の VS Code Desktop またはスタンドアロンダウンロード経由) を使用してください。

  1. ローカルの VS Code クライアントで開発したいリモートマシンに code CLI をインストールします。これはリモートデスクトップ、VM、あるいは Windows Subsystem for Linux (WSL) ディストリビューションでも構いません。

    CLI は既存の VS Code インストールに自動的に含まれており、追加の設定は不要です。VS Code がインストールされていない場合、またはリモートマシンにインストールできない場合は、ダウンロードページからスタンドアロンインストールで CLI を入手できます。

    CLI download section

    注: スタンドアロンインストールを使用している場合、次のセクションのコマンドは code ではなく ./code で始まります。

  2. help コマンドを使用して、CLI が正常にインストールされたことを再確認してください。

    code -h

    トンネリング固有のコマンドは、次のようにして調べることができます。

    code tunnel -h

    CLI をインストールしたので、このマシンをトンネリング用にセットアップし、どの VS Code クライアントからでも接続できるようにしましょう。

  3. tunnel コマンドでセキュアなトンネルを作成します。

    code tunnel

    このコマンドは、このマシンに VS Code Server をダウンロードして起動し、それからそのマシンへのトンネルを作成します。

    注: マシン上で初めてトンネルを開始する際に、サーバーのライセンス条項に同意するよう求められます。プロンプトを回避するには、コマンドラインで --accept-server-license-terms を渡すこともできます。

  4. この CLI は、このリモートマシンに紐付けられた vscode.dev URL (例: https://vscode.dev/tunnel/<machine_name>/<folder_name>) を出力します。この URL は任意のコンピューターから開くことができます。

  5. クライアントで初めて vscode.dev URL を開く際、https://github.com/login/oauth/authorize... の URL で GitHub アカウントにログインするよう求められます。これは、適切なリモートマシンへのアクセス権があることを確認するために、トンネリングサービスに対してあなたを認証するものです。

おめでとうございます。code CLI の最新のトンネリング機能を正常にインストールし、使用することができました！

VS Code UI からのトンネリングの有効化

リモートマシンに VS Code がインストールされている場合、VS Code UI から直接トンネルを作成することもできます。これは、VS Code で既に作業している場合に、マシンへのリモートアクセスを有効にする迅速かつ便利な方法です。

リモートマシンで VS Code を開きます。VS Code のアカウントメニューで、以下の画像に示すように、リモートトンネルアクセスを有効にする... オプションを選択します。コマンドパレット (F1) を開いて、Remote Tunnels: Turn on Remote Tunnel Access... コマンドを実行することもできます。

Turn on Remote Tunnel Access in the Account menu

GitHub へのログインを求められます。ログイン後、このリモートマシン上でトンネルが起動し、それに接続できるようになります。

Remote tunnel access is enabled toast

選択したクライアントで、上記の通知から vscode.dev リンクを開いてコーディングを開始できます！

リモートトンネル経由で接続

Remote - Tunnels 拡張機能は、ローカルマシンとリモートマシン間のこれらのセキュアなトンネルを管理します。code CLI または VS Code UI を介して開く vscode.dev インスタンスには、Remote Tunnels 拡張機能がプリインストールされています。

VS Code クライアント (デスクトップまたはウェブ) で既に作業しており、リモートトンネルに接続したい場合は、Remote - Tunnels 拡張機能を直接インストールして使用できます。拡張機能をインストールしたら、コマンドパレット (F1) を開き、Remote Tunnels: Connect to Tunnel コマンドを実行します。アクティブなトンネルを持つ任意のリモートマシンに接続できます。

List of remote machines in Quick Pick

リモートマシンはリモートエクスプローラーでも表示できます。これはRemote Explorer: Focus on Remote View コマンドで開くことができます。

List of remote machines in Remote Explorer

トンネルまたはマシンの削除

CLI 経由で実行しているトンネルを停止したい場合は、Ctrl + C を使用してアクティブな接続を終了します。VS Code UI からトンネリングを有効にしている場合は、Remote Tunnels: Turn off Remote Tunnel Access... コマンドを実行します。

マシンとトンネリングの関連付けを解除するには、そのマシンで code tunnel unregister を実行します。VS Code では、リモートエクスプローラービューを選択し、削除したいマシンを右クリックして登録解除を選択します。

Remote Development 拡張機能

トンネリングと code CLI の更新に加えて、開発コンテナー、リモートマシン、または WSL をフル機能の開発環境として使用できるようにするリモート開発拡張機能にもいくつか更新を行いました。

WSL と Dev Containers

Remote - WSL および Remote - Containers 拡張機能の名前に関するフィードバックをいただきました。Remote は、従来のローカル開発ではなく、「リモート」または「独立した」WSL ディストリビューションまたは開発コンテナーで開発していることを示す意図でした。しかし、これは多くの人が使用する「リモート」の用法とは異なり、混乱を招く可能性がありました（例えば、「Dev Container はローカルマシン上にあるのか？」など）。

これらの拡張機能の名前と製品内コマンドをより明確にするために更新し、それぞれWSL とDev Containers に変更しました。Marketplace の拡張機能識別子やドキュメントなどのリンクは変更されていないため、これら2つの拡張機能の現在の使用に支障は出ないはずです。

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

Remote Tunnels

前述のとおり、SSH を必要とせずに、Remote - Tunnels 拡張機能を使用してセキュアなトンネル経由でリモートマシンに接続できます。この拡張機能は、その動作をより明確に示すものとして、「Remote Server」から「Remote - Tunnels」に名前を変更しました（結局のところ、この拡張機能はセキュアなトンネル経由でリモートマシンで開発するために使用されるのですから！）。

Remote - Tunnels extension in the Marketplace

最後に – ありがとうございます！

長年にわたり、当社のリモート体験、そして最近では VS Code Server に関する皆様からのフィードバックをいただいております。弊社の製品体験を形作り続けているご意見を共有していただき、心より感謝申し上げます。最新のリモート機能を皆様がどのように活用されるか、そしてそのフィードバックを楽しみにしています！

このブログで説明されているツールについてさらに詳しく知りたい場合は、Remote - Tunnels 拡張機能に関するトピックを作成し、最新の変更を反映するためにVS Code Server およびcode CLI のドキュメントを更新しました。

機能リクエストやバグは、弊社の vscode-remote-release GitHub リポジトリに自由に報告してください。または、Twitter で@code 宛に意見をツイートすることもできます。

ハッピーコーディング！

Brigit Murtaugh、@BrigitMurtaugh