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)キーボードショートカットを使用してアクセスできます。変更がある場合、ソース管理アイコンはリポジトリに現在ある変更の数を示します。

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

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

また、VS Codeのステータスバーの左下に、リポジトリの状態を示すインジケーターがあります: 現在のブランチ、変更インジケーター、現在のブランチの受信および送信コミットの数です。リポジトリ内の任意のブランチをチェックアウトするには、ステータスインジケーターを選択し、リストからGitリファレンスを選択します。

リポジトリのクローン

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

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

GitHubリポジトリの場合、GitHubのCodeダイアログから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. ソース管理ビューで、コードレビューボタンを選択して、コミットされていない変更のコードレビューを開始します

   

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

   

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

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

GitHubドキュメントのCopilotでのコード変更のレビューで詳細を確認してください。

ブランチとタグ

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

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

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

リモート

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

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

ソース管理グラフ

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

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

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

• エントリを選択して、そのコミットで変更されたファイルを確認します。変更を開くアクションを選択して、エディターでコミットの差分を表示します。
• コミットを右クリックして、チェックアウト、チェリーピック、チャットのコンテキストとして追加などのアクションを実行します。
• ファイルを選択して、エディターでそのファイルの差分を表示します。

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

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

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

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

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

ガターインジケーター

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

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

マージの競合

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

3-wayマージエディター

マージの競合を解決するのに役立つように、VS Codeは3-wayマージエディターを提供しています。ここでは、受信した変更と現在の変更をインタラクティブに受け入れ、結果のマージされたファイルを表示および編集できます。3-wayマージエディターは、Gitマージの競合があるファイルの右下隅にあるマージエディターで解決ボタンを選択して開きます。

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

競合の解決

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

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

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

マージの完了

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

代替レイアウトなど

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

受信、現在、および結果の横にある3つのドットは、ベースとの並列差分表示、すべての変更の受け入れ、結果のリセットなど、各ビューのオプションを提供します。

競合の理解

3-wayマージエディターの仕組みの詳細についてもっと知りたい場合は、次のビデオをお勧めします

差分の表示

私たちの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出力ウィンドウを開くには、表示 > 出力を実行し、ドロップダウンリストからLog (Git)を選択します。

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

コマンドラインからVS Codeを起動するとき、--wait引数を渡して、新しいVS Codeインスタンスを閉じるまで起動コマンドを待機させることができます。これは、VS CodeをGitの外部エディターとして設定するときに便利です。Gitは、起動されたVS Codeインスタンスを閉じるまで待機します。

そのための手順は次のとおりです

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

これは、VS Codeに渡すことができる--diffオプションを使用して、2つのファイルを並べて比較します。マージツールは、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のプルリクエストとIssueの操作

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

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をご覧ください。