VS Code で GitHub を使用する

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

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

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

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

GitHub Pull Requests and Issues を使い始める

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

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

リポジトリの設定

リポジトリをクローンする

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

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

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

GitHub を介した認証の有効化は、メンバーであるリポジトリへのプッシュやプライベートリポジトリのクローンなど、GitHub 認証を必要とする Git アクションを VS Code で実行したときに行われます。認証のために特別な拡張機能をインストールする必要はありません。リポジトリを効率的に管理できるように、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: Queries (githubIssues.queries) 設定で構成できます。クエリは GitHub 検索構文を使用します。

また、GitHub Issues: Ignore Completion Trigger (githubIssues.ignoreCompletionTrigger) および GitHub Issues: Ignore User Completion Trigger (githubIssues.ignoreUserCompletionTrigger) 設定を使用して、これらの提案を表示するファイルを構成することもできます。これらの設定は、ファイルの種類を指定するために言語識別子の配列を受け取ります。

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

プルリクエスト

Pull Requests ビューから、プルリクエストの表示、管理、作成ができます。

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

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

プルリクエストの作成

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

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

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

作成ボタンのメニューでは、ドラフトの作成や自動マージ方法の有効化など、代替の作成オプションを選択できます。

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

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

レビュー

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

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

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

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

Issue

Issue の作成

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

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

デフォルトの Issue トリガーは

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

Issue での作業

Issues ビューから、自分の Issue を確認し、それに取り組むことができます。

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

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

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

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

GitHub Repositories 拡張機能

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

リポジトリを開く

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

Open Repository コマンドを実行すると、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 拡張機能はメモリ内に仮想ファイルシステムを作成し、ファイルの内容を表示したり編集したりできるようにします。仮想ファイルシステムを使用するということは、ローカルファイルを前提とする一部の操作や拡張機能が有効になっていないか、機能が制限されることを意味します。タスク、デバッグ、統合ターミナルなどの機能は有効になっておらず、リモートインジケーターのホバーにある features are not available リンクから仮想ファイルシステムのサポートレベルについて学ぶことができます。

拡張機能の作成者は、仮想ワークスペース拡張機能作成者ガイドで、仮想ファイルシステムとワークスペースでの実行について詳しく学ぶことができます。

Continue Working On...

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

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

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

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

未コミットの変更がある状態で初めて Continue Working On を使用すると、Settings Sync で使用されるのと同じ VS Code サービスに保留中の変更を保存する Cloud Changes を使用して、選択した開発環境に編集内容を持ち込むオプションが表示されます。

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

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

次のステップ

• Copilot VS Code についてもっと知る - VS Code の Copilot について学びます。