VS Code での GitHub の操作

GitHub は、ソース コードを保存および共有するためのクラウドベースのサービスです。Visual Studio Code で GitHub を使用すると、エディター内から直接ソース コードを共有したり、他のユーザーと共同作業したりできます。GitHub と対話する方法は多数あります。たとえば、https://github.com の Web サイトや Git コマンドライン インターフェイス (CLI) などがありますが、VS Code では、豊富な GitHub 統合が GitHub Pull Requests and Issues 拡張機能によって提供されます。

GitHub Pull Requests and Issues 拡張機能をインストールする

VS Code で GitHub を使い始めるには、Git をインストールし、GitHub アカウントを作成 し、GitHub Pull Requests and Issues 拡張機能をインストールする必要があります。このトピックでは、VS Code を離れることなく GitHub のお気に入りの部分をいくつか使用する方法を紹介します。

ソース管理を初めて使用する場合、または VS Code の基本的な Git サポートの詳細を知りたい場合は、ソース管理 のトピックから始めることができます。

GitHub プルリクエストと Issue の概要

GitHub Pull Requests and Issues 拡張機能をインストールしたら、サインインする必要があります。プロンプトに従ってブラウザで GitHub で認証し、VS Code に戻ります。

VS Code にリダイレクトされない場合は、認証トークンを手動で追加できます。ブラウザ ウィンドウに認証トークンが表示されます。トークンをコピーして、VS Code に戻ります。ステータス バーの github.com にサインインしています... を選択し、トークンを貼り付けて、Enter キーを押します。

リポジトリのセットアップ

リポジトリのクローン

コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) の Git: クローン コマンドを使用するか、ソース管理ビュー (フォルダーを開いていない場合に利用可能) の リポジトリのクローン ボタンを使用して、GitHub からリポジトリを検索してクローンできます。

GitHub リポジトリ ドロップダウンから、ローカルにクローンするリポジトリをフィルタリングして選択できます。

既存のリポジトリでの認証

GitHub 経由の認証の有効化は、VS Code で GitHub 認証を必要とする Git アクション (メンバーになっているリポジトリへのプッシュやプライベート リポジトリのクローンなど) を実行するときに行われます。認証用に特別な拡張機能をインストールする必要はありません。リポジトリを効率的に管理できるように、VS Code に組み込まれています。

GitHub 認証が必要な操作を行うと、サインインを求めるプロンプトが表示されます

手順に従って GitHub にサインインし、VS Code に戻ります。個人用アクセス トークン (PAT) を使用したサインインは、GitHub Enterprise Server でのみサポートされています。GitHub Enterprise Server を使用していて、PAT を使用したい場合は、PAT のプロンプトが表示されるまでサインイン プロンプトで "キャンセル" をクリックできます。

GitHub への認証には、2 要素認証 (2FA) を使用したユーザー名とパスワード、個人用アクセス トークン、SSH キーなど、いくつかの方法があることに注意してください。詳細および各オプションの詳細については、GitHub への認証について を参照してください。

注: コンテンツをローカル マシンにクローンせずにリポジトリで作業したい場合は、GitHub Repositories 拡張機能をインストールして、GitHub で直接参照および編集できます。詳細については、以下の GitHub Repositories 拡張機能 セクションを参照してください。

エディターの統合

ホバー

リポジトリを開いていて、ユーザーが @ メンションされている場合、そのユーザー名にカーソルを合わせると、GitHub スタイルのホバーが表示されます。

#-メンションされた Issue 番号、GitHub Issue の完全な URL、およびリポジトリ指定の Issue についても同様のホバーがあります。

候補

ユーザー候補は "@" 文字でトリガーされ、Issue 候補は "#" 文字でトリガーされます。候補はエディターと ソース管理 ビューの入力ボックスで使用できます。

候補に表示される Issue は、GitHub Issues: クエリ (githubIssues.queries) 設定 で構成できます。クエリは GitHub 検索構文 を使用します。

GitHub Issues: 補完トリガーを無視する (githubIssues.ignoreCompletionTrigger) および GitHub Issues: ユーザー補完トリガーを無視する (githubIssues.ignoreUserCompletionTrigger) 設定を使用して、これらの候補を表示するファイルを構成することもできます。これらの設定は、ファイル タイプを指定するための 言語識別子 の配列を受け取ります。

// Languages that the '#' character should not be used to trigger issue completion suggestions.
"githubIssues.ignoreCompletionTrigger": [
  "python"
]

プルリクエスト

プルリクエスト ビューから、プルリクエストの表示、管理、および作成を行うことができます。

プルリクエストを表示するために使用されるクエリは、GitHub Pull Requests: クエリ (githubPullRequests.queries) 設定で構成でき、GitHub 検索構文 を使用します。

"githubPullRequests.queries": [
    {
        "label": "Assigned To Me",
        "query": "is:open assignee:${user}"
    },

プルリクエストの作成

フォークまたはブランチへの変更をコミットしたら、GitHub Pull Requests: プルリクエストの作成 コマンドまたは プルリクエスト ビューの プルリクエストの作成 ボタンを使用して、プルリクエストを作成できます。

新しい 作成 ビューが表示され、プルリクエストのターゲットにするベース リポジトリとベース ブランチを選択したり、タイトルと説明を入力したりできます。リポジトリにプルリクエスト テンプレートがある場合、これは説明に自動的に使用されます。

上部のアクション バーのボタンを使用して、担当者、レビュアー、ラベル、および マイルストーン を追加します。

作成 ボタン メニューを使用すると、下書きを作成 などの代替作成オプションを選択したり、自動マージ メソッドを有効にしたりできます。

作成 を選択すると、ブランチを GitHub リモートにまだプッシュしていない場合、拡張機能はブランチを公開するかどうかを尋ね、特定のリモートを選択するためのドロップダウンを提供します。

プルリクエストの作成 ビューは、レビュー モード に入り、PR の詳細を確認したり、コメントを追加したり、準備ができたら PR をマージしたりできます。PR がマージされたら、リモート ブランチとローカル ブランチの両方を削除するオプションがあります。

レビュー

プルリクエストは、プルリクエスト ビューからレビューできます。レビュアーとラベルを割り当てたり、コメントを追加したり、承認、クローズ、およびマージをすべてプルリクエストの 説明 から行うことができます。

説明 ページから、チェックアウト ボタンを使用してプルリクエストをローカルに簡単にチェックアウトすることもできます。これにより、VS Code はレビュー モードでプルリクエストのフォークとブランチ (ステータス バーに表示) を開くように切り替わり、新しい プルリクエストの変更 ビューが追加されます。このビューから、現在の変更の差分、すべてのコミット、およびこれらのコミット内の変更を表示できます。コメントされたファイルは、ひし形アイコンで装飾されます。ディスク上のファイルを表示するには、ファイルを開く インライン アクションを使用できます。

このビューの差分エディターはローカル ファイルを使用するため、ファイル ナビゲーション、IntelliSense、および編集は通常どおりに機能します。これらの差分に関するコメントをエディター内に追加できます。単一のコメントの追加とレビュー全体の作成の両方がサポートされています。

プルリクエストの変更のレビューが完了したら、PR をマージするか、レビュー モードを終了 を選択して、作業していた前のブランチに戻ることができます。

Issue

Issue の作成

Issue は、Issue ビューの + ボタンから、および GitHub Issues: 選択範囲から Issue を作成 および GitHub Issues: クリップボードから Issue を作成 コマンドを使用して作成できます。また、「TODO」コメントのコード アクションを使用して作成することもできます。Issue を作成するときは、デフォルトの説明を使用するか、右上の 説明を編集 鉛筆アイコンを選択して、Issue 本文のエディターを表示することができます。

GitHub Issues: Issue 作成トリガー (githubIssues.createIssueTriggers) 設定を使用して、コード アクションのトリガーを構成できます。

デフォルトの Issue トリガーは次のとおりです

"githubIssues.createIssueTriggers": [
  "TODO",
  "todo",
  "BUG",
  "FIXME",
  "ISSUE",
  "HACK"
]

Issue の作業

Issue ビューから、Issue を確認して作業できます。

デフォルトでは、Issue の作業を開始すると (Issue の作業を開始 コンテキスト メニュー項目)、以下の画像のように、ステータス バーにブランチが作成されます。

ステータス バーには、アクティブな Issue も表示され、その項目を選択すると、GitHub Web サイトで Issue を開いたり、プルリクエストを作成したりするなど、Issue アクションのリストが利用可能になります。

ブランチの名前は、GitHub Issues: Issue ブランチ タイトル (githubIssues.issueBranchTitle) 設定を使用して構成できます。ワークフローにブランチの作成が含まれていない場合、または毎回ブランチ名を入力するように求めたい場合は、GitHub Issues: Issue にブランチを使用する (githubIssues.useBranchForIssues) 設定をオフにすることで、その手順をスキップできます。

Issue の作業が完了し、変更をコミットする場合は、ソース管理 ビューのコミット メッセージ入力ボックスにメッセージが入力されます。これは、GitHub Issues: 作業 Issue 形式 SCM (githubIssues.workingIssueFormatScm) で構成できます。

GitHub Repositories 拡張機能

GitHub Repositories 拡張機能を使用すると、リポジトリをローカルにクローンする必要なく、Visual Studio Code 内から直接、リモート GitHub リポジトリをすばやく参照、検索、編集、およびコミットできます。これは、ソース コードを確認したり、ファイルやアセットに小さな変更を加えたりするだけでよい多くのシナリオで、高速かつ便利です。

リポジトリを開く

GitHub Repositories 拡張機能をインストールしたら、コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) から GitHub Repositories: リポジトリを開く... コマンドを使用するか、ステータス バーの左下にあるリモート インジケーターをクリックして、リポジトリを開くことができます。

リポジトリを開く コマンドを実行すると、GitHub からリポジトリを開くか、GitHub からプルリクエストを開くか、以前に接続したリポジトリを再度開くかを選択できます。

VS Code から GitHub にまだログインしていない場合は、GitHub アカウントで認証するように求められます。

リポジトリ URL を直接指定するか、テキスト ボックスに入力して目的のリポジトリを GitHub で検索できます。

リポジトリまたはプルリクエストを選択すると、VS Code ウィンドウがリロードされ、ファイル エクスプローラーにリポジトリの内容が表示されます。その後、ファイルを開いて (完全な構文の強調表示と括弧の照合あり)、編集を行い、変更をコミットできます。これは、リポジトリのローカル クローンで作業する場合と同じです。

ローカル リポジトリでの作業との違いの 1 つは、GitHub Repository 拡張機能で変更をコミットすると、変更がリモート リポジトリに直接プッシュされることです。これは、GitHub Web インターフェイスで作業している場合と同様です。

GitHub Repositories 拡張機能のもう 1 つの機能は、リポジトリまたはブランチを開くたびに、GitHub から利用可能な最新のソースを取得できることです。ローカル リポジトリの場合のように、プルして更新することを覚えておく必要はありません。

GitHub Repositories 拡張機能は、Git LFS (Large File System) をローカルにインストールする必要なく、LFS トラッキングされたファイルの表示とコミットもサポートしています。LFS でトラッキングするファイル タイプを .gitattributes ファイル に追加し、ソース管理ビューを使用して変更を GitHub に直接コミットします。

ブランチの切り替え

ステータス バーのブランチ インジケーターをクリックすると、ブランチを簡単に切り替えることができます。GitHub Repositories 拡張機能の優れた機能の 1 つは、コミットされていない変更を退避させる必要なくブランチを切り替えることができることです。拡張機能は変更を記憶し、ブランチを切り替えるときに再適用します。

リモート エクスプローラー

アクティビティ バーで使用可能なリモート エクスプローラーを使用して、リモート リポジトリをすばやく再度開くことができます。このビューには、以前に開いたリポジトリとブランチが表示されます。

プルリクエストの作成

ワークフローでリポジトリへの直接コミットではなくプルリクエストを使用する場合は、ソース管理ビューから新しい PR を作成できます。タイトルを入力し、新しいブランチを作成するように求められます。

プルリクエストを作成したら、GitHub Pull Request and Issues 拡張機能を使用して、このトピックの 前述 のように、PR をレビュー、編集、およびマージできます。

仮想ファイルシステム

ローカル マシンにリポジトリのファイルがない場合、GitHub Repositories 拡張機能はメモリ内に仮想ファイルシステムを作成するため、ファイルの内容を表示したり、編集したりできます。仮想ファイルシステムを使用するということは、ローカル ファイルを想定する一部の操作や拡張機能が有効になっていないか、機能が制限されていることを意味します。タスク、デバッグ、および統合ターミナルなどの機能は有効になっていません。リモート インジケーターのホバーにある 機能は利用できません リンクから、仮想ファイルシステムのサポート レベルについて学ぶことができます。

拡張機能の作成者は、仮想ワークスペース拡張機能作成者ガイド で仮想ファイルシステムとワークスペースでの実行の詳細を確認できます。

作業の継続...

ローカル ファイルシステムと完全な言語および開発ツールをサポートする開発環境でリポジトリでの作業に切り替えたい場合があります。GitHub Repositories 拡張機能を使用すると、簡単に次のことができます。

• GitHub Codespace を作成します (GitHub Codespaces 拡張機能 がある場合)。
• リポジトリをローカルにクローンします。
• リポジトリを Docker コンテナにクローンします (Docker と Microsoft Docker 拡張機能 がインストールされている場合)。

開発環境を切り替えるには、コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) から 作業の継続... コマンドを使用するか、ステータス バーのリモート インジケーターをクリックします。

ブラウザベースのエディター を使用している場合、"作業の継続..." コマンドには、リポジトリをローカルで開くか、GitHub Codespaces のクラウドホスト環境内で開くオプションがあります。

コミットされていない変更で 作業の継続 を初めて使用するときは、設定の同期に使用されるのと同じ VS Code サービスに保留中の変更を保存する クラウド変更 を使用して、選択した開発環境に変更を持ち込むオプションがあります。

これらの変更は、ターゲット開発環境に適用されると、サービスから削除されます。コミットされていない変更なしで続行することを選択した場合、後で "workbench.cloudChanges.continueOn": "prompt" 設定を構成することで、この設定をいつでも変更できます。

保留中の変更がターゲット開発環境に自動的に適用されない場合は、クラウド変更: クラウド変更を表示 コマンドを使用して、保存された変更を表示、管理、および削除できます。

次のステップ

• Copilot VS Code の詳細 - VS Code での Copilot について学びます。