に参加して、VS Code の AI 支援開発について学びましょう。

リモートリポジトリ

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 Development拡張機能のコマンドと一緒に表示されます)。

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 Explorer、検索、タイムラインビュー、クイックオープン、そしてもちろんソース管理などの機能を使用できます。

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

Hover over remote indicator for limited virtual workspace message

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

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

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

そして、Explorerで変更されたファイルをハイライト表示します。

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拡張機能の詳細については、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つのオプションが表示されます。

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

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

VS CodeでRemote Repositoriesを使用する方法を説明したところで、このエクスペリエンスを支える技術的な詳細と、拡張機能がRemote Repositoryセッションで機能するようにする方法について説明したいと思います。

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

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

エンドユーザーとしては、作業したいリポジトリまたは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

© . This site is unofficial and not affiliated with Microsoft.