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

リモートリポジトリ

2021年6月10日 Brigit Murtaugh、@BrigitMurtaugh、Eric Amodio、@eamodio

: このブログ投稿の公開以降、Remote Repositories 拡張機能はGitHub Repositoriesに名称変更されました。拡張機能に関する最新の情報は、最新のドキュメントもご確認ください。

Visual Studio Code 向けの新しいRemote Repositories拡張機能をご紹介できることを嬉しく思います!これは、GitHub の友人たちと協力して開発を進めてきた新しい体験であり、VS Code 内でソースコードリポジトリを迅速かつ安全に操作できるようにするものです。

Remote Repositories extension

ソースコードリポジトリを開くより速い方法

VS Code では、当初から Git の統合サポートを提供しており、その他多くのソースコード管理 (SCM) プロバイダーを拡張機能を通じてサポートしてきました。これにより、開発者は VS Code 内で直接リポジトリをクローンし、作業できるようになっています。

しかし、開発者が日々行っていることの大部分は、他の人のコードを読むことに関わっています。プルリクエストのレビュー、オープンソースリポジトリの閲覧、新しいテクノロジーやプロジェクトの実験、アプリケーションのデバッグのためのアップストリーム依存関係の検査などです。これらのすべてに共通しているのは、最初のステップとして、通常はリポジトリをローカルにクローンし、お気に入りのコードエディター(VS Code であることを願っています!)でコードを開くことです。しかし、リポジトリのクローンには時間がかかり、プルを忘れるとリポジトリの古いバージョンをレビューしてしまう可能性があり、コードに不慣れな場合はセキュリティリスクとなることもあります。

GitHub が公開している新しいRemote Repositories拡張機能は、VS Code でソースコードリポジトリを開く体験を瞬時に、そして安全なものにします。これにより、VS Code 内から直接、任意のリモート GitHub リポジトリ(まもなく Azure Repos も)をすばやく閲覧、検索、編集、コミットでき、クローンは不要です!

マシンにソースコードを保存することなく、好きなだけ多くのリポジトリで作業できます。Remote Repositories は、時間とローカルディスクスペースを節約し、すべてのソース管理タスクを完全に VS Code 内で完結させることを可能にします。

このブログ投稿では、Remote Repositories の始め方がいかに簡単か、最初のリモートリポジトリを開いた後に何ができるか、この仮想環境を支える技術的な詳細、そして本日どのようにフィードバックを提供できるかについて説明します。

VS Code で最初のリモートリポジトリを開く

VS Code でリモートリポジトリを開いてみましょう。まず、Remote Repositories拡張機能がインストールされていることを確認してください。

現在、Remote Repositories は GitHub リポジトリをサポートしており、まもなく Azure Repos のサポートも追加される予定です。このブログ投稿では、まず VS Code リポジトリ (microsoft/vscode) を開くことから始めます。

Remote Repositories 拡張機能をインストールすると、VS Code の左下にあるリモートインジケーターをクリックすることで(インストールされている他のリモート開発拡張機能のコマンドと合わせて)、そのOpen Remote Repositoryコマンドにすぐにアクセスできます。

Remote indicator in VS Code

これまでに VS Code から GitHub にログインしたことがない場合、GitHub アカウントの認証を求められます。ログイン後、リポジトリまたは PR を検索し、目的のものを選択すれば準備完了です。

下記の短いビデオでは、VS Code リポジトリを検索して選択すると、VS Code が再読み込みされ、まるでローカルにクローンしたかのようにリポジトリの内容が読み込まれる様子が示されています。

Gif of using Open Remote Repository command, search for "microsoft/vscode," repo loads, open readme

VS Code を離れることなく、リポジトリを探索し、貢献することができます。使い慣れた VS Code のインターフェースを使用し、VS Code エクスプローラー、検索、タイムラインビュー、クイックオープン、そしてもちろんソース管理といった機能を使って、まるでローカルコードで作業しているかのように感じられます。

これで、仮想ワークスペースと呼ばれるものに接続されました(仮想ワークスペースの詳細については以下を参照)。リモートインジケーターには「GitHub」と表示されます。リモートインジケーターにカーソルを合わせると、仮想ワークスペースでは一部の機能が利用できないことが通知されます。

Hover over remote indicator for limited virtual workspace message

仮想ワークスペースは特別な設定であり、拡張機能など一部の機能が無効になったり、機能が制限されたりします。リモートインジケーターにカーソルを合わせたときに表示されるSome featuresリンクをクリックすることで、どの拡張機能が無効になっているかを簡単に確認できます。

リンクをクリックすると、どの拡張機能が無効になっていて、どの機能が制限されているかが表示されます。制限された機能は、拡張機能にカーソルを合わせると確認できます。

VS Code Extensions view with limited and disabled extensions

仮想ワークスペースで拡張機能を手動で有効にしたい場合は、ユーザーのsettings.jsonファイルでextensions.supportVirtualWorkspaces設定を使用できます。

    "extensions.supportVirtualWorkspaces": { "<extensionID>": true }

拡張機能によっては、ローカルファイルシステムへのアクセスなしに仮想ワークスペースを処理するように実装されていない場合があり、その場合、拡張機能が期待通りに動作しない可能性があることに留意してください。

リポジトリを開いたら、次は何をしますか?

リポジトリを開くと、Remote Repositories を使ってプロジェクトに簡単に貢献できます。

プロジェクトを最新の状態に保つ、シンプル化された Git ワークフロー

Remote Repositories は、複雑な Git コマンドを必要とせず、常にリポジトリの最新バージョンを使用できるようにします。

新しいリポジトリを開くたびに、最新バージョンが開かれます。Remote Repositories が GitHub からの新しい変更を検出すると、ステータスバーにプルダウンする必要があるコミット数が表示されます。

VS Code Status bar showing "GitHub" in remote indicator and 1 pending change

そして、エクスプローラーで変更されたファイルをハイライト表示します。

VS Code Explorer listing files and README has 1 change

変更をコミットすると、それらは自動的に GitHub に表示されます。変更をプッシュしたり、作成した新しいブランチを公開したりする必要はありません。

プルリクエストを作成またはチェックアウトする

Remote Repositories はGitHub Pull Requests and Issues 拡張機能とうまく連携します。この拡張機能を使用すると、GitHub からのプルリクエストや課題を VS Code 内で直接レビューおよび管理できます。これら2つの拡張機能を並行して使用することで、コードをローカルにクローンしたり、VS Code を離れたりすることなく、迅速に PR をチェックアウトし、課題に取り組むことができます。

コードに変更を加え、その変更に基づいて新しいブランチとプルリクエスト(PR)を作成し、その後その PR をチェックアウトするといった一連の操作が、わずか数クリックで行えます。

Gif using GitHub Pull Request extension to create branch and PR, and check out that PR

GitHub Pull Requests and Issues 拡張機能の詳細については、当社の「Working with GitHub」記事でご確認いただけます。

変更をブランチに分離して保持する

作業を完了するにあたり、ブランチを切り替える必要があるかもしれません。一般的な環境では、どの変更をスタッシュまたはコミットするかを決定する必要がある場合、これが厄介になることがあります。

Remote Repositories を使用すると、複数のブランチで同時に簡単に作業できます。あるブランチでの作業を一時停止して新しいブランチに切り替えても、変更をスタッシュするかどうかを尋ねられることはありません。変更は自動的に前のブランチに残ります。前のブランチに戻ると、変更はまだそこにあり、中断したところから再開できます。

ブランチに変更をプッシュする方法を見てみましょう。

ステータスバーで現在のブランチ(例:「main」)を選択し、ブランチのリストを開きます。

VS Code Status bar on Main branch

+ Create New Branch... を選択し、ブランチの名前を入力します。

VS Code Command Palette with options to create new branch

その後、その新しいブランチに切り替えることができます。

Remote Repositories prompt to switch to new branch

新しいブランチには、前のブランチからの変更は含まれません。

制限

Remote Repositories を使用する際のいくつかの制限事項

  • デバッグ、ターミナル、タスク - 現在サポートされていません。ターミナルはローカルファイルシステムで開かれるため、リモートリポジトリの仮想ファイルシステムにはアクセスできません。
  • 言語インテリジェンスの制限 - 多くの言語が Remote Repositories の仮想化された環境をまだ理解していないため、IntelliSense や定義へ移動などの機能が影響を受ける可能性があります。
  • 検索 - GitHub 検索自体には、ブランチのインデックス作成を行わないといった制限があります。Remote Repositories は、インデックス作成を有効にすることでこの制限を回避し、フルテキスト検索を実行できます。インデックス作成は、GitHub からリポジトリのシャロークローンをプルし、ローカルで完全な検索を実行するため、GitHub のあいまいなデフォルトブランチネイティブ検索よりも優れた機能を提供します。Remote Repositories でのインデックス作成は、検索ビューから有効にできます。
  • 拡張機能の制限 - すべての拡張機能が仮想ワークスペースでの実行をサポートしているわけではありませんが、時間とともに多くの拡張機能がサポートするようになるでしょう。ローカルファイルへのアクセスに大きく依存する拡張機能は、この設定をサポートできません。詳細については、以下の仮想ワークスペースのセクションを参照してください。

私たちはこの道のりを始めたばかりですので、開発を続けるにつれて機能セットが拡大し、制限が減少していくことを期待してください。

より強力な環境で作業を続ける

Remote Repositories を使用すると、VS Code は物理ファイルシステムが存在しないため、すべての機能が利用できるわけではない環境で動作します。これはリポジトリの閲覧を素早く開始するのに最適ですが、次のようなより「高度な」作業を行う準備ができた場合はどうでしょうか。

  • リポジトリで積極的に作業し、VS Code の全機能を利用したい場合。
  • 定期的にリモートからプルすることで、リポジトリの変更を積極的に追跡する必要がある場合。

より高度なワークフローに移行するために、Remote Repositories は、環境を「アップグレード」し、現在作業している場所から作業を継続する方法を提供します。

左下のリモートインジケーターをクリックし、Continue Working on... を選択します。

VS Code Command Palette with "Continue Working on..." command

3つのオプションが表示されます

  • リポジトリをローカルにクローン: 現在のリポジトリをローカルマシンにクローンします。ローカルのファイルエクスプローラーがポップアップし、ディスク上のクローン先の場所を選択できます。
  • コンテナーボリュームにリポジトリをクローン: Dev Containers 拡張機能を使用して、現在のリポジトリを Docker コンテナーボリュームにクローンします(Dev Containers拡張機能と Docker がインストールされている必要があります)。VS Code は再読み込みされ、Dev Containers を使用して接続され、リモートインジケーターにはDev Container: {イメージ名}と表示されるようになります。
  • Codespaces で開く: GitHub Codespace で作業を続行します。このオプションを選択すると、ブラウザが開き、このリポジトリの Codespaces のリストに誘導されます。

VS Code Command Palette with options to continue locally, in a volume, or in Codespaces

VS Code で Remote Repositories を使用する方法を説明しましたが、ここからはこの体験を支える技術的な詳細と、拡張機能が Remote Repositories セッションで動作することを保証する方法について説明します。

仮想ファイルシステムとワークスペース

このリモート作業を支える中核となる概念は、仮想ファイルシステムと仮想ワークスペースです。

エンドユーザーとしては、どのリポジトリまたは PR で作業したいかを知るだけで十分です。VS Code が仮想ファイルシステムを処理し、ワークスペースを管理してくれます。拡張機能開発者としては、拡張機能が期待通りに動作するように、仮想ファイルシステム API を採用する必要があります。

仮想ファイルシステムの仕組み

従来の Git ワークフローで作業する場合、リポジトリを「git clone」すると、コピーがコンピューターのローカルファイルシステムに保存されます。しかし、Remote Repositories で作業する場合、コードはローカルコンピューターには存在せず、GitHub 上に留まります。

コードは仮想ファイルシステムを通じて操作します。これは、ディスク上に物理的に存在するファイルから抽象化されたものです。仮想ファイルシステムは、GitHub のようなコードホスト、クラウドストレージ、またはデータベースからコンテンツを提供し、これらをVS Code 内でユーザーにファイルとしてシームレスに提供できます。

仮想ファイルシステム上でワークスペースを開くと、それは仮想ワークスペースとして知られています。仮想ワークスペースで作業している間も、拡張機能を含む VS Code の機能にアクセスできます。

仮想ワークスペースで拡張機能が動作することを確認する

拡張機能が適切に動作するためには、仮想ファイルシステムをサポートしている必要があります。

拡張機能にコードがなく、純粋なカラーテーマ、キーバインディング、スニペット、または文法拡張機能である場合、仮想ワークスペースで実行でき、特別な対応は必要ありません。

実際のコードを実行する、つまりメインエントリポイントを定義する拡張機能は、検査と場合によっては採用が必要です。

仮想ファイルシステムのAPI サポートは、FileSystemProviderインターフェースを通じて提供されます。ファイルシステムプロバイダーは新しい URI スキーム(例: vscode-vfs)に登録され、そのファイルシステム上のリソースは、そのスキームを使用する URI(vscode-vfs://github/microsoft/vscode/package.json)で表現されます。

拡張機能のpackage.jsonにはcapabilitiesプロパティがあり、virtualWorkspacesサブプロパティは、拡張機能が仮想ワークスペースで動作するかどうかを示すために使用されます。

仮想ファイルシステム、ワークスペース、および拡張機能への実装方法の詳細については、仮想ワークスペース拡張機能開発者ガイドでご確認いただけます。

フィードバックとその他の情報

Remote Repositories をお試しいただき、フィードバックをいただけることを大変楽しみにしています。

Remote Repositories拡張機能をインストールしてください。問題や機能のリクエストを提出したり、@codeまでツイートでご意見をお寄せください。

Remote Repositories 拡張機能の使用方法に関する新しいYouTube ビデオもご覧ください。

拡張機能開発者の方は、拡張機能開発者向け仮想ワークスペースサポートガイドを確認し、ご質問やフィードバックは追跡イシューでお知らせください。また、Extension Authors コミュニティのSlack グループに参加することもできます。

ハッピーコーディング!

Brigit Murtaugh、VS Code プログラムマネージャー @BrigitMurtaugh
Eric Amodio、VS Code プリンシパルソフトウェアエンジニア @eamodio