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は、octocorp.ghe.com など、GHE.comのサブドメインでは使用できません。

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. アクティビティ バーで、 [ソース管理] ビューをクリックします。

    VS Code アクティビティ バーのスクリーンショット。ブランチ アイコンのラベルが付いたソース管理ボタンがオレンジ色の枠線で強調表示されています。

  2. 変更をステージングするには、変更したファイルの横にある をクリックし、複数のファイルを変更してすべてをステージングする場合は [ 変更 ] の横にある [変更] をクリックします。

    [ソース管理] サイド バーのスクリーンショット。[変更] の右側にあるステージング ボタン (プラス記号) が濃いオレンジ色の枠線で強調表示されています。

  3. テキスト ボックスに、行った変更について説明するコミット メッセージを入力します。

    [ソース管理] サイド バーのスクリーンショット。[コミット] ボタンの上にあるテキスト ボックスにコミット メッセージが入力されています。

  4. [コミット & プッシュ] をクリックします。

    変更は、 GitHubのブランチに自動的にプッシュされます。

pull request を作成する

  1. 変更をリポジトリのローカル コピーにコミットしたら、[ソース管理] サイド バーの上部にある pull request アイコンをクリックします。

    [ソース管理] サイド バーの上部のスクリーンショット。 pull request アイコンが濃いオレンジ色の枠線で強調表示されています。

  2. マージ元のローカルブランチとリポジトリ、およびマージ先のリモートブランチとリポジトリが正しいことを確認します。 そして、プルリクエストにタイトルと説明を付けます。

    [GitHub pull request] サイド バーと pull request を作成するフォームのスクリーンショット。[タイトル] と [説明] のフィールドが表示されています。

  3. [作成] をクリックします。

既存のプルリクエストの管理

VS Code for the Webを使用して、既存のプル要求を操作できます。

  1. VS Code for the Web で開きたいプル リクエストに移動します。
  2. .キーを押して、pull request をVS Code for the Webで開きます。
  3. 変更を行ったら、「変更をコミットする」の手順を使用して変更をコミットします。 変更はブランチに直接コミットされます。変更をプッシュする必要はありません。

拡張機能の使用

VS Code for the Web では、Web で実行するために特別に作成または更新された VS Code 拡張機能がサポートされています。 これらの拡張機能は、"Web 拡張機能" と呼ばれます。 Web 拡張機能を作成する方法、または Web で機能するように既存の拡張機能を更新する方法については、VS Codeドキュメントの Web 拡張機能を参照してください。

VS Code for the Webで実行できる拡張機能は拡張機能ビューに表示され、インストールできます。 Settings Sync を使用すると、互換性のある拡張機能も自動的にインストールされます。 詳細については、VS Codeドキュメントの「設定の同期」を参照してください。