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

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

2022年12月7日 by Brigit Murtaugh, @BrigitMurtaugh

Visual Studio Code は、その核心においてコード エディターですが、リモート開発エクスペリエンスを通じて他の環境と統合することで、さらに強力で柔軟になります。

Spectrum of remote development options

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

Output of code CLI

CLI は VS Code Desktop を使用するワークフローで非常に便利ですが、1つギャップがありました。リモート インスタンスを起動することができなかったのです。そこで私たちは、ローカルとリモートをより密接に連携させ、CLI をさらに強力にすることで、そのギャップを解消したいと考えました。

本日、VS Code Desktop または vscode.dev から VS Code を起動し、リモートのマシンに接続できる、強化された 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 のデスクトップまたは Web クライアントから、選択した任意のマシンに対して開発を行うことができます。

VS Code からリモートマシンへのトンネリングには、2つの優れた選択肢があります。

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

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

強化された code CLI

VS Code Server をリリースした際、私たちはそれを code CLI に統合するという長期的なビジョンに言及しました。私たちは今これを達成し、VS Code Desktop をインストールできない VM やロックダウンされたマシンで作業している場合にも備えて、スタンドアロンでのインストールも可能にしました。

以下は、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. ヘルプ コマンドを使用して、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 のアカウント メニューで、下の画像で示されているように [リモート トンネル アクセスを有効にする (Turn on Remote Tunnel Access…)] オプションを選択します。コマンド パレット (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 クライアント (デスクトップまたは Web) で作業していて、リモート トンネルに接続したい場合は、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 で、リモート エクスプローラー ビューを選択し、削除したいマシンを右クリックして [登録解除 (unregister)] を選択します。

リモート開発拡張機能

トンネリングと 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

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

Remote - Tunnels extension in the Marketplace

おわりに – ありがとうございます！

私たちは長年にわたり、リモート エクスペリエンスについて、そして最近では VS Code Server についてのフィードバックをいただいてきました。私たちの製品エクスペリエンスを形作り続けるご意見を共有してくださり、心から感謝しています。皆さんが私たちの最新のリモート機能をどのように使用されるか、そしてそのフィードバックを楽しみにしています！

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

機能リクエストやバグは、私たちの vscode-remote-release GitHub リポジトリにお気軽に提出してください。また、ご意見を @code 宛にツイートすることもできます。

ハッピーコーディング！

Brigit Murtaugh、@BrigitMurtaugh