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 の [コード] ダイアログから 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. 提案を適用または破棄するには、対応するボタンを使用するか、[コメント] パネルでコンテキストメニューアクションを使用します。

Copilot を使用したコード変更のレビュー の詳細については、GitHub ドキュメントをご覧ください。

ブランチとタグ

コマンドパレット (⇧⌘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 ウェイマージエディター

マージコンフリクトの解決を支援するために、VS Code は、受信と現在の変更をインタラクティブに受け入れ、マージされた結果のファイルを表示および編集できる 3 ウェイマージエディターを提供します。3 ウェイマージエディターは、Git マージコンフリクトのあるファイルの右下隅にある [マージエディターで解決] ボタンを選択すると開きます。

3 ウェイマージエディターには、[受信] 変更 (左側)、[現在] 変更 (右側)、およびマージの [結果] (下部) の個別のビューが表示されます。コンフリクトは強調表示され、CodeLens ボタンを使用して解決できます。

コンフリクトの解決

3 ウェイマージエディターを使用すると、一方または両方の変更を受け入れることでコンフリクトを解決できます。マージの結果を手動で編集することもできます。

一部のコンフリクトでは、マージエディターに [組み合わせを受け入れる] ボタンが表示されます。[組み合わせを受け入れる] を選択すると、現在のコンフリクトが両方の変更をスマートにマージすることで解決されます。これは、同じ文字に触れない同じ行の変更に特に役立ちます。

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

マージの完了

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

代替レイアウトなど

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

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

コンフリクトの理解

3 ウェイマージエディターの仕組みの詳細について詳しく知りたい場合は、次のビデオをお勧めします。

差分の表示

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 を起動するときに、--wait 引数を渡して、新しい VS Code インスタンスを閉じるまで起動コマンドが待機するようにすることができます。これは、VS Code を Git 外部エディターとして構成する場合に役立ちます。Git は、起動された VS Code インスタンスを閉じるまで待機します。

これを行う手順は次のとおりです。

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

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

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 プルリクエストと Issue の操作

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

SCM プロバイダー

VS Code は、複数のソース管理プロバイダーの同時処理をサポートしています。たとえば、複数の Git リポジトリを Azure DevOps Server ローカルワークスペースと並行して開き、プロジェクト間でシームレスに作業できます。ソース管理プロバイダー ビューをオンにするには、ソース管理 ビュー (⌃⇧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 を参照してください。