VS Code で Git ソース管理を使用する

Visual Studio Code は、統合されたソース管理 (SCM) を備えており、すぐに使える Git サポートが含まれています。他の多くのソース管理プロバイダーは、Visual Studio Marketplace の拡張機能を通じて利用できます。

VS Code の GitHub Copilot を使用すると、コミットメッセージ、プルリクエストの提案を受けたり、コミットする前にコードの変更をレビューしたりできます。VS Code の GitHub Copilot について詳しく学ぶことができます。

Git リポジトリでの作業

VS Code は、Git リポジトリであるフォルダーを開くと、それを認識します。ソース管理ビューを使用すると、コマンドラインを使わずにほとんどの Git 操作を実行できます。

ソース管理ビューにアクセスするには、アクティビティバーのソース管理アイコンを選択するか、キーボードショートカットの⌃⇧G (Windows、Linux Ctrl+Shift+G) を使用します。変更がある場合、ソース管理アイコンは、現在リポジトリにいくつの変更があるかを示します。

ソース管理ビューには、現在のリポジトリの変更の詳細が表示されます: CHANGES (変更)、STAGED CHANGES (ステージされた変更)、および MERGE CHANGES (マージされた変更)。また、ソース管理グラフを表示して、変更がリポジトリの履歴とどのように関連しているかを確認することもできます。

ソース管理ビューでファイルを選択すると、そのファイルに加えた変更が差分エディターで表示されます。

VS Code ステータスバーの左下にも、リポジトリの状態を示すインジケーターがあります。これには、現在のブランチ、ダーティインジケーター、現在のブランチの受信コミット数と送信コミット数が含まれます。リポジトリ内の任意のブランチをチェックアウトするには、ステータスインジケーターを選択し、リストから Git 参照を選択します。

リポジトリのクローン

まだフォルダーを開いていない場合、ソース管理ビューには、ローカルマシンからフォルダーを開くか、リポジトリをクローンするオプションが表示されます。

リポジトリをクローンを選択すると、リモートリポジトリ (例: GitHub) の URL と、ローカルリポジトリを配置する親ディレクトリが尋ねられます。

GitHub リポジトリの場合、GitHub のコードダイアログから URL を見つけることができます。

次に、その URL をGit: クローンプロンプトに貼り付けます。

また、GitHub からクローンするオプションも表示されます。VS Code で GitHub アカウントを認証すると、名前でリポジトリを検索し、任意のリポジトリを選択してクローンできるようになります。コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) のGit: クローンコマンドを使用して、Git リポジトリのクローンプロセスを開始することもできます。段階的な手順については、VS Code からリポジトリをクローンするビデオをご覧ください。

リポジトリの初期化

ワークスペースがローカルマシンにある場合、リポジトリを初期化コマンドを使用して Git リポジトリを作成することで、Git ソース管理を有効にできます。VS Code が既存の Git リポジトリを検出しない場合、ソース管理ビューには、リポジトリを初期化またはGitHub に公開するオプションが表示されます。

コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) からGit: リポジトリを初期化およびGitHub に公開コマンドを実行することもできます。

• リポジトリを初期化: 必要な Git リポジトリのメタデータファイルを作成し、ワークスペースファイルをステージする準備ができた追跡されていない変更として表示します。
• GitHub に公開: ワークスペースフォルダーを GitHub リポジトリに直接公開し、プライベートリポジトリとパブリックリポジトリのどちらかを選択できます。GitHub への公開の詳細については、リポジトリの公開ビデオをご覧ください。

コミット

ステージング (git add) とアンステージング (git reset) は、ファイル内のコンテキストアクションまたはドラッグ&ドロップで実行できます。

変更の上にコミットメッセージを入力し、Ctrl+Enter (macOS: ⌘+Enter) を押してコミットできます。ステージされた変更がある場合、それらの変更のみがコミットされます。それ以外の場合は、コミットしたい変更を選択するよう促され、コミット設定を変更するオプションが表示されます。

これは素晴らしいワークフローであると私たちは考えています。たとえば、前のスクリーンショットでは、overview.png に対するステージされた変更のみがコミットに含まれます。後のステージングとコミットのアクションでは、versioncontrol.md と他の2つの.png 画像に対する変更を別のコミットとして含めることができます。

より具体的なコミットアクションは、ソース管理ビューの上部にあるビューとその他のアクション ... メニューで見つけることができます。

AI でコミットメッセージを生成

VS Code の GitHub Copilot は、コードの変更に基づいてコミットメッセージを生成できます。ソース管理ビューで、コミットメッセージ入力ボックスにあるCopilot でコミットメッセージを生成ボタン () を選択します。

組織やプロジェクトのコミットメッセージに特定の要件がある場合は、Copilot のカスタム指示を使用してコミットメッセージを生成できます。たとえば、コミットメッセージの最大長は60文字で、現在形の動詞で始める必要があります。コミットメッセージ生成のための Copilot カスタム指示の詳細を参照してください。

エディターを使用してコミットメッセージを作成する

変更をコミットするときにコミットメッセージを入力しない場合、VS Code は COMMIT_EDITMSG ファイルのエディターを開き、エディターでコミットメッセージを作成できます。コミットメッセージを指定したら、エディタータブを閉じるか、エディターツールバーのコミットメッセージを承認ボタンを選択して変更をコミットします。

コミット操作をキャンセルするには、テキストエディターのコンテンツをクリアしてエディタータブを閉じるか、エディターツールバーのコミットメッセージを破棄ボタンを選択します。

この機能を無効にするには、git.useEditorAsCommitInput 設定を切り替えます。設定を変更した後、変更を有効にするには VS Code を再起動する必要があります。

統合ターミナルで実行される git commit コマンドに同じフローを使用するには、git.terminalGitEditor 設定を有効にします。

Git blame 情報

VS Code は、Git blame 情報をエディター内とステータスバーにインラインで表示できます。ステータスバーの項目またはインラインヒントにカーソルを合わせると、詳細な Git blame 情報が表示されます。

Git blame 情報を有効または無効にするには、Git: Git Blame エディターの装飾を切り替えるおよびGit: Git Blame ステータスバー項目を切り替えるコマンドを使用するか、これらの設定を構成します。

• git.blame.statusBarItem.enabled (既定で有効)
• git.blame.editorDecoration.enabled

エディターとステータスバーに表示されるメッセージの形式は、git.blame.editorDecoration.template および git.blame.statusBarItem.template 設定でカスタマイズできます。最も一般的な情報には変数が使用できます。

たとえば、次のテンプレートは、コミットの件名、作者の名前、および現在からの作者の相対日付を表示します。

{
  "git.blame.editorDecoration.template": "${subject}, ${authorName} (${authorDateAgo})"
}

エディターの装飾の色を調整するには、git.blame.editorDecorationForeground テーマカラーを使用します。

コミットされていないコード変更を AI でレビュー

VS Code の GitHub Copilot は、コミットされていないコードの変更をレビューするのに役立ちます。

1. ソース管理ビューで、Copilot コードレビューボタンを選択して、コミットされていない変更のコードレビューを開始します。

   

2. Copilot は、コードレビューのコメントと提案をエディターにオーバーレイとして生成します。

   

   すべてのコードレビューコメントのリストは、コメントパネルで表示することもできます。

3. 対応するボタン、またはコメントパネルのコンテキストメニューアクションを使用して、提案を適用または破棄します。

GitHub ドキュメントのCopilot でコードの変更をレビューするの詳細をご覧ください。

ブランチとタグ

VS Code 内で、コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) のGit: ブランチを作成およびGit: チェックアウト先コマンドを使用して、ブランチを直接作成およびチェックアウトできます。

Git: チェックアウト先を実行すると、現在のリポジトリ内のすべてのブランチまたはタグを含むドロップダウンリストが表示されます。また、それがより良いオプションであると判断した場合は新しいブランチを作成するオプション、またはデタッチモードでブランチをチェックアウトするオプションも提供されます。

Git: ブランチを作成コマンドを使用すると、新しいブランチをすばやく作成できます。新しいブランチの名前を指定するだけで、VS Code はブランチを作成してそれに切り替えます。新しいブランチを...から作成を選択すると、新しいブランチが指すコミットを指定できる追加のプロンプトが表示されます。

リモート

リポジトリがリモートに接続されており、チェックアウトされているブランチがそのリモートのブランチへのアップストリームリンクを持っている場合、VS Code はそのブランチをプッシュ、プル、および同期するための便利なアクションを提供します (後者はプルコマンドの後にプッシュコマンドを実行します)。これらのアクションは、リモートを追加または削除するオプションとともに、ビューとその他のアクション ... メニューで見つけることができます。

VS Code は、リモートからの変更を定期的にフェッチできます。これにより、VS Code はローカルリポジトリがリモートよりどれだけ先行または遅れているかを表示できます。この機能は既定で無効になっており、git.autofetch 設定を使用して有効にできます。

ソース管理グラフ

リモートリポジトリが構成されている場合、リモートよりどれだけのコミットが進んでいるか、または遅れているかを確認できます。ソース管理ビューのグラフビューは、送受信中のコミットのグラフィカルな表示を示します。

グラフには、現在のブランチ、現在のブランチのアップストリームブランチ、およびオプションのベースブランチが含まれています。グラフのルートは、これらのブランチの共通の祖先です。

グラフは次の機能を提供します。

• エントリを選択すると、そのコミットで変更されたファイルが表示されます。変更を開くアクションを選択すると、エディターでコミットの差分が表示されます。
• コミットを右クリックすると、チェックアウト、チェリーピックなどのアクションを実行できます。Copilot アクションを使用して、コミットを要約したり、チャットプロンプトのコンテキストとして添付したりできます。
• ファイルを選択すると、そのファイルの差分がエディターに表示されます。

グラフビューのツールバーにあるアクションを使用して、ブランチの選択、フェッチ、プル、プッシュ、および変更の同期を行います。

Git ステータスバーのアクション

現在のチェックアウトされたブランチにアップストリームブランチが構成されている場合、ステータスバーのブランチインジケーターの横に変更を同期アクションがあります。変更を同期すると、リモートの変更がローカルリポジトリにプルされ、ローカルコミットがアップストリームブランチにプッシュされます。

アップストリームブランチが構成されておらず、Git リポジトリにリモートが設定されている場合、公開アクションが有効になります。これにより、現在のブランチをリモートに公開できます。

ワークスペースに複数の Git リポジトリが含まれている場合、ステータスバーには現在のリポジトリが表示されます。ステータスバーの項目を選択すると、アクティブにするリポジトリの動作を選択できます。

ガターインジケーター

Git リポジトリであるフォルダーを開いて変更を加え始めると、VS Code はガターと概要ルーラーに便利な注釈を追加します。

• 赤い三角形は、行が削除された場所を示します
• 緑色のバーは、新しく追加された行を示します
• 青いバーは、変更された行を示します

マージの競合

マージの競合は VS Code によって認識されます。相違点が強調表示され、いずれかまたは両方の変更を受け入れるためのインラインアクションが提供されます。競合が解決されたら、競合しているファイルをステージして、それらの変更をコミットできるようにします。

3方向マージエディター

マージの競合を解決するために、VS Code は3方向マージエディターを提供します。これにより、受信変更と現在の変更を対話的に受け入れ、結果のマージ済みファイルを表示および編集できます。3方向マージエディターは、Git マージの競合があるファイルの右下隅にあるマージエディターで解決ボタンを選択して開きます。

3方向マージエディターは、受信変更 (左側)、現在の変更 (右側)、およびマージの結果 (下側) の個別のビューを表示します。競合は強調表示され、CodeLens ボタンを使用して解決できます。

競合の解決

3方向マージエディターを使用すると、いずれか一方または両方の変更を受け入れることで競合を解決できます。マージの結果を手動で編集することもできます。

一部の競合については、マージエディターに組み合わせを承認ボタンが表示されます。組み合わせを承認すると、両方の変更をスマートにマージすることで現在の競合が解決されます。これは、同じ文字には触れない同じ行の変更に特に役立ちます。

無視ボタンを使用して、受信変更も現在の変更も受け入れず、競合を解決済みとしてマークします。これにより、競合領域は変更が行われる前の状態にリセットされます。

マージの完了

結果エディターの右側にある競合カウンターを使用して、未解決の競合がいくつ残っているかを追跡できます。カウンターをクリックすると、次の未解決の競合にジャンプします。すべての競合が解決されると、右下隅にあるマージを完了を選択してマージを完了できます。これにより、ファイルがステージされ、マージエディターが閉じます。

代替レイアウトなど

マージエディターの右上隅にある3つの点 (···) を選択すると、追加オプションのコンテキストメニューが開きます。垂直レイアウトに切り替えたり、ベースビューを表示したりできます。ベースビューは、変更が行われる前のファイルの状態を示します。

Incoming、Current、およびResultの横にある3つの点は、ベースとの並列差分表示、すべての変更の承認、結果のリセットなど、各ビューのオプションを提供します。

競合を理解する

3方向マージエディターがどのように機能するかについて詳しく知りたい場合は、次のビデオをお勧めします。

差分を表示する

VS Code の Git ツールは、VS Code 内での差分表示をサポートしています。

差分エディターの中央には個別のガターがあり、コードブロックの変更をステージまたは元に戻すことができます。テキストブロックを選択すると、選択に含まれる変更を元に戻すか、ステージできます。

アクセシブルな差分ビューアー

差分エディターには、統一されたパッチ形式で変更を表示するアクセシブルな差分ビューアーがあります。次の差分に移動 (F7) および前の差分に移動 (⇧F7 (Windows、Linux Shift+F7)) を使用して、変更間を移動できます。矢印キーで行間を移動し、Enter を押すと、差分エディターに戻り、選択された行にジャンプします。

タイムラインビュー

既定ではファイルエクスプローラーの下部にアクセスできるタイムラインビューは、ファイルの時系列イベント (例: Git コミット) を視覚化するための統合ビューです。

VS Code の組み込み Git サポートは、指定されたファイルの Git コミット履歴を提供します。コミットを選択すると、そのコミットによって導入された変更の差分ビューが開きます。コミットを右クリックすると、コミット ID をコピーとコミットメッセージをコピーのオプションが表示されます。

Visual Studio Code は、VS Code Marketplace で利用可能な拡張機能を通じて、より多くの Git 履歴ワークフローをサポートしています。

Git 出力ウィンドウ

使用している Git コマンドをいつでも確認できます。これは、何かおかしなことが起こっている場合や、単に好奇心がある場合に役立ちます。:)

Git 出力ウィンドウを開くには、表示 > 出力を実行し、ドロップダウンリストからログ (Git) を選択します。

Git エディターとしての VS Code

コマンドラインから VS Code を起動するときに、新しい VS Code インスタンスを閉じるまで起動コマンドを待機させるために、--wait 引数を渡すことができます。これは、VS Code を Git の外部エディターとして構成する場合に役立ちます。これにより、起動された VS Code インスタンスを閉じるまで Git が待機します。

手順は次のとおりです。

1. コマンドラインから code --help を実行し、ヘルプが表示されることを確認してください。
   • ヘルプが表示されない場合は、次の手順に従ってください。
     • macOS: コマンドパレットからシェルコマンド: 'code' コマンドをパスにインストールを選択します。
     • Windows: インストール中にPATH に追加を選択したことを確認してください。
     • Linux: 新しい .deb または .rpm パッケージを介して Code をインストールしたことを確認してください。
2. コマンドラインから git config --global core.editor "code --wait" を実行します。

これで git config --global -e を実行し、VS Code を Git 設定のエディターとして使用できます。

Git difftool および mergetool としての VS Code

コマンドラインから Git を使用する場合でも、VS Code の差分およびマージ機能を使用できます。VS Code を差分およびマージツールとして使用するには、Git 設定に以下を追加します。

[diff]
    tool = default-difftool
[difftool "default-difftool"]
    cmd = code --wait --diff $LOCAL $REMOTE
[merge]
    tool = code
[mergetool "code"]
    cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED

これは、2つのファイルを並べて比較するために VS Code に渡すことができる --diff オプションを使用します。マージツールは、Git が次にマージの競合を検出したときに使用されます。

まとめとして、VS Code をエディターとして使用できる例をいくつか示します。

• git rebase HEAD~3 -i VS Code を使用してインタラクティブなリベースを実行
• git commit コミットメッセージに VS Code を使用
• git add -p の後に e でインタラクティブな追加
• git difftool <commit>^ <commit> 変更の差分エディターとして VS Code を使用

GitHub プルリクエストとイシューを操作する

Visual Studio Code は、GitHub のプルリクエストとイシューも取り込むことができます。VS Code でプルリクエストを作成し、コメントでレビューし、コンテキストを切り替えることなく承認できます。VS Code での GitHub プルリクエストとイシューについて詳しく学ぶことができます。

SCM プロバイダー

VS Code は、複数のソース管理プロバイダーを同時に処理するサポートを提供します。たとえば、Azure DevOps Server のローカルワークスペースと並行して複数の Git リポジトリを開き、プロジェクト間でシームレスに作業できます。ソース管理プロバイダービューをオンにするには、ソース管理ビュー (⌃⇧G (Windows、Linux Ctrl+Shift+G)) のオーバーフローメニューを選択し、ビューにカーソルを合わせ、ソース管理リポジトリにチェックマークが付いていることを確認します。ソース管理プロバイダービューには、検出されたプロバイダーとリポジトリが表示され、特定のプロバイダーを選択することで、変更の表示範囲を絞り込むことができます。

SCM プロバイダー拡張機能

別の SCM プロバイダーをインストールしたい場合は、拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) のscm providers拡張機能カテゴリで検索できます。「@ca」と入力し始めると、デバッガーやリンターなどの拡張機能カテゴリの提案が表示されます。@category:"scm providers" を選択すると、利用可能な SCM プロバイダーが表示されます。

次のステップ

• 入門ビデオ - Git バージョン管理 - VS Code の Git サポートの概要を説明する入門ビデオです。

• GitHub でのコラボレーション入門 - VS Code で GitHub を使用する方法を学びます。

• Copilot VS Code について詳しく学ぶ - VS Code の Copilot について学びます。

• ソース管理 API - 別のソース管理プロバイダーを VS Code に統合したい場合は、ソース管理 API を参照してください。