GitHubからの Web 用 VS Code の使用

VS Code for the Webから直接リポジトリを開いたり、GitHubで要求をプルしたりして、コードの参照、ファイルの編集、変更のコミットを行うことができます。

この記事で

メモ

github.devでリポジトリを開くと、ブラウザーベースのバージョンのVS Code for the WebVS Codeで開きます。 詳細については、VS Code for the WebドキュメントのVS Codeを参照してください。

VS Code for the Web の概要

VS Code for the Web は、ブラウザーで完全に実行される軽量の編集エクスペリエンスです。 VS Code for the Webを使用すると、GitHubからファイルとソース コード リポジトリを移動し、コードの変更を行ってコミットできます。 ユーザーは任意のリポジトリ、フォーク、または pull request をエディターで開くことができます。

VS Code for the Web は、 GitHub.comで誰でも無料で利用できます。

VS Code for the Web には、検索、構文の強調表示、ソース管理ビューなど、 Visual Studio Codeの利点の多くが用意されています。 設定同期を使用して、独自の VS Code 設定をエディターと共有することもできます。 VS Codeドキュメントの「設定の同期」を参照してください。

VS Code for the Web は、ブラウザーのサンドボックス内で完全に実行されます。 エディターはリポジトリを複製しませんが、代わりに GitHub Repositories 拡張機能 を使用して、使用するほとんどの機能を実行します。 作業内容は、コミットするまでブラウザーのローカル ストレージに保存されます。 変更内容に常にアクセスできるようにするために、変更を定期的にコミットするようにしてください。

GitHubを使用するには、VS Code for the Webにサインインする必要があります。

VS Code for the Web から GitHub を開く

次のいずれかの方法で、GitHubで任意のVS Code for the Web リポジトリを開くことができます。

  • 同じブラウザー タブでリポジトリを開くには、. キーを押します GitHubでリポジトリまたは pull request を参照している間。

    新しいブラウザー タブでリポジトリを開くには、> キーを押します。

  • URL を "github.com" から "github.dev" に変更します。

  • ファイルを表示するときに、 ドロップダウン メニューを選択し、[ github.dev] をクリックします。

    編集アイコンのドロップダウン メニューのスクリーンショット。 オプション [github.dev] が濃いオレンジ色の枠線で強調表示されています。

Codespaces と VS Code for the Web

VS Code for the WebとGitHub Codespacesの両方で、リポジトリから直接コードを編集できます。 ただし、ユース ケースによって、それぞれの利点が若干異なります。

VS Code for the WebGitHub Codespaces
コストフリー。個人用アカウントでの 1 か月あたりの使用量の無料クォータについては、「GitHub Codespaces の課金」を参照してください。
可用性GitHub.comのすべてのユーザーが利用できます。GitHub.comのすべてのユーザーが利用できます。
起動VS Code for the Web キーを押すとすぐに開き、追加の構成やインストールを待つ必要なく、すぐに使用を開始できます。codespace を作成または再開すると、codespace に VM が割り当てられ、devcontainer.json ファイルの内容に基づいてコンテナーが構成されます。 この設定では、環境の作成に数分かかる場合があります。 「リポジトリの codespace を作成する」を参照してください。
計算するコンピューティングが関連付けられていないため、コードをビルドして実行したり、統合ターミナルを使用したりすることはできません。GitHub Codespacesを使用すると、アプリケーションを実行およびデバッグできる専用 VM の機能が得られ、ローカル環境とまったく同じようにターミナルを使用できます。
拡張機能Web で実行できる拡張機能のサブセットのみが拡張機能ビューに表示され、インストールできます。 「拡張機能の使用」をご覧ください。GitHub Codespacesでは、Visual Studio Code Marketplaceのほとんどの拡張機能を使用できます。

ソース管理の使用

VS Code for the Webを使用すると、左側のアクティビティ バーにある "ソース管理" ビューですべてのアクションが管理されます。 "ソース管理" ビューの詳細については、VS Codeドキュメントのバージョン管理を参照してください。

VS Code for the Webでは GitHub Repositories 拡張機能を使用して機能を強化するため、変更を一時保存しなくてもブランチを切り替えることができます。 VS Codeドキュメントの「GitHub リポジトリ」を参照してください。

新しいブランチを作成する

  1. 現在のブランチがステータス バーに表示されていない場合は、codespace の下部でステータス バーを右クリックし、 [ソース コントロール] を選択します。

  2. ステータスバーでブランチ名をクリックします。

    VS Code のステータス バーに表示されているブランチ名のスクリーンショット。

  3. ドロップダウンで、切り替えるブランチをクリックするか、新しいブランチ名を入力して [新しいブランチの作成] をクリックします。

    VS Code で新しいブランチを作成するためのドロップダウンのスクリーンショット。 古いブランチで行ったコミットされていない変更は、新しいブランチで使用できます。

変更をコミットする

  1. アクティビティ バーで、