Zenn
🗂

VS Codeでファイル・ソースコードの差分を比較（diff）する2通りの方法

2023/11/22に公開
VS Code
#
diff
#
compare
tech

概要

コードやファイルの差分を比較する際は、今までWinMerge（ウィンマージ）を使用していましたが、
Visual Studio Code（以下、VS Code）でも比較する方法が大きくわけて2通りありました。

ファイルやソースコードなどデータの差分を比較（diff）したい場合にオススメの記事です。

この記事のターゲット

  • VS Codeユーザーの方
  • VS Codeでファイル・ソースコードを差分比較したい方
    • A）キーボード操作で効率的に比較する方法
    • B）マウス操作で簡単に比較する方法
  • VS Codeの比較機能で“できること・できないこと”を知りたい方

環境

VS Codeのバージョン
PS C:\XXXX> code -v
1.82.0
8b617bd08fd9e3fc94d14adb8d358b56e3f72314
x64
PS C:\XXXX>
補足情報：VS Codeでインストール済みの拡張機能を確認 < クリックで折りたたみが開く >
VS Codeインストール済み拡張機能の一覧
PS C:\XXXX> code --list-extensions --show-versions
ms-azuretools.vscode-docker@1.26.0
MS-CEINTL.vscode-language-pack-ja@1.82.2023090609  
ms-kubernetes-tools.vscode-kubernetes-tools@1.3.13 
ms-vscode-remote.remote-containers@0.309.0
ms-vscode-remote.remote-ssh@0.106.1
ms-vscode-remote.remote-ssh-edit@0.86.0
ms-vscode-remote.remote-wsl@0.81.2
ms-vscode-remote.vscode-remote-extensionpack@0.24.0
ms-vscode.hexeditor@1.9.12
ms-vscode.powershell@2023.6.0
ms-vscode.remote-explorer@0.4.1
ms-vscode.remote-server@1.4.3
redhat.vscode-yaml@1.14.0
serkonda7.vscode-vba@0.9.1
spences10.vba-snippets@1.0.1
PS C:\XXXX>

対応方法

大きくわけてキーボード操作とマウス操作の2通りの方法を紹介。

A）キーボード操作で効率的に比較する方法

コマンドパレット（ Ctrl + Shift + P or F1 ）でVS Codeの比較機能を呼び出して使用します。
下記が詳細な手順です。

  1. VS Codeでショートカットキーを入力しコマンドパレットを表示する
    コマンドパレットを表示するショートカットキー：Ctrl + Shift + P or F1
    ショートカットキーを入力しコマンドパレットを表示している状態
    画像：VS Codeでコマンドパレットを表示している状態

  2. コマンドパレットの入力欄で「 compare or 比較 」を入力する

    • compareと入力した場合
      コマンドパレットの入力欄で「 compare 」を入力した状態
      画像：コマンドパレットで「 compare 」を入力した状態

    • 比較と入力した場合
      コマンドパレットの入力欄で「 比較 」を入力した状態
      画像：コマンドパレットで「 比較 」を入力した状態

  3. 目的（用途）に合わせ比較するモードを選択する

    No. 比較モード 用途
    1 ファイル: アクティブ ファイルを比較しています...
    File: Compare Active File With...    		 現在のアクティブファイル と 指定したファイル を比較する。
    2 ファイル: クリップボードとアクティブ ファイルを比較
    File: Compare Active File with Clipboard    		 Ctrl + Cでクリップボードに保存された文字列 と 現在のアクティブファイル を比較する。
    3 ファイル: 新しい無題のテキスト ファイルの比較
    File: Compare New Untitled Text Files    		 比較モードで新規テキストファイルを2つ開いた状態となる。
    4 ファイル: 保存済みファイルと作業中のファイルを比較
    File: Compare Active File with Saved    		 未編集状態のアクティブファイル と 前回保存したアクティブファイル を比較する。
    5 マージの場合: 現在の競合を比較
    Merge Conflict: Compare Current Conflict    		 Git環境でブランチをマージした時にコンリクト（競合）が発生していないか比較する。

    今回は1番目の「 ファイル: アクティブ ファイルを比較しています... 」を選択しEnterキーを入力、
    現在のアクティブファイル と 指定したファイル を比較するモードで対応してみます。
    　
    なお、この比較モードでは、言葉のとおりアクティブ ファイルが比較対象となるため、
    対象のファイルを開いた状態で起動する必要があります。

  4. 最近開いたもの一覧から“比較したいファイル”を選択
    最近開いたもの一覧から“比較したいファイル”を選択
    画像：最近開いたもの一覧から比較対象のファイルを選択

  5. 比較モードが起動
    比較モードが起動
    画像：比較モードが起動

    差分表示の方法を切り替えたい場合 < クリックで折りたたみが開く >

    上記の差分表示は最後に選択した“比較したいファイル”が軸に表示されています。
    　
    私が操作する場合、基本的に“アクティブファイル”が最新のファイルで、“比較したいファイル”が過去のファイル。
    今回の例では最新のファイルに行を追加していますので、最新のファイルを軸に黄色で強調された表示にしたいケースが多いです。
    　
    そのような場合、下記の「左側と右側を入れ替える」ボタンで変更が可能です。
    　
    “左側と右側を入れ替える”ボタン
    画像：“左側と右側を入れ替える”ボタンを押すと...
    “左側と右側を入れ替える”ボタンで入れ替えた状態
    画像：差分の表示方法が「削除された」から「追加された」に変更

B）マウス操作で簡単に比較する方法

1つひとつ選択する場合

  1. アクティビティ バーのエクスプローラーを表示
    アクティビティ バーのエクスプローラーを選択
    画像：アクティビティ バーのエクスプローラーを選択
    アクティビティ バーのエクスプローラーが表示された状態
    画像：アクティビティ バーのエクスプローラーが表示された状態
  2. 比較対象となる1つ目のファイルを選択し右クリック
    修正前・修正後を比較する場合、2つ目を最新のファイルで選択した方が、
    差分がわかりやすくなる。
    ココでは、修正前のファイルを選択。
    比較対象となる1つ目のファイルを選択し右クリック
    画像：修正前のファイルを選択し右クリック
  3. 表示されたコンテキストメニューから「比較対象の選択」をクリック
    “比較対象の選択”をクリック
    画像：コンテキストメニューの“比較対象の選択”をクリック
  4. 比較対象となる2つ目のファイルを選択し右クリック
    修正前・修正後を比較する場合、2つ目を最新のファイルで選択した方が、
    差分がわかりやすくなる。
    ココでは、修正後（最新）のファイルを選択。
    比較対象となる2つ目のファイルを選択し右クリック
    画像：修正後（最新）のファイルを選択し右クリック
  5. 表示されたコンテキストメニューから「選択項目と比較」をクリック
    “選択項目と比較”をクリック
    画像：コンテキストメニューの“選択項目と比較”をクリック
  6. 比較モードが起動
    比較モードが起動
    画像：比較モードが起動

一度に2つ選択する場合

  1. アクティビティ バーのエクスプローラーを表示
  2. 比較元と比較先となるファイルを2つ選択し右クリック
    選択方法は範囲選択（Shiftキー長押し+クリック）でも部分選択（Ctrlキー長押し+クリック）どちらでもOK
  3. 表示されたコンテキストメニューから「選択項目の比較」をクリック
    “選択項目の比較”をクリック
    画像：2つ選択した状態で右クリック → “選択項目の比較”をクリック
  4. 比較モードが起動

補足事項：比較機能で知っておくと便利な情報

比較モード中に便利なショートカットキー

ショートカットキー 動作するアクション
“比較”モード中に Alt + F5 次の差異
“比較”モード中に Shift + Alt + F5 前の差異
“比較”モード中に Ctrl + M “タブによるフォーカス移動”モードがオン
もう一度、入力するとモード解除。
“比較”＋“タブによるフォーカス移動”モード中に Tab 次のコントロールにフォーカスが移動する
比較元のテキスト と 比較先のテキスト の間を移動する際に便利。
“比較”＋“タブによるフォーカス移動”モード中に Shift + Tab 前のコントロールにフォーカスが移動する
比較元のテキスト と 比較先のテキスト の間を移動する際に便利。

通常モードで便利なショートカットキー

差分を比較機能ではありませんが、簡単に見比べたい場合は分割すると便利です。

ショートカットキー 動作するアクション
Ctrl + \ 左右分割を開始
Ctrl + K → Ctrl + \ 上下分割を開始
Ctrl + K → Shift + Ctrl + \ グループ内分割を開始
もう一度、入力すると解除。

VS Codeの比較機能で“できること・できないこと”

できること

  • 単純なファイル2つの差分を確認できる
  • 比較元と比較先を横並びで確認できる（初期状態は横並びで表示の変更可能）
  • 表示の変更で比較元と比較先をインライン表示でも確認できる
  • 比較元、または比較先を直接編集できる

できないこと

  • バイナリデータの比較
  • フォルダー単位の比較
  • 比較対象を3つ以上で設定すること
  • レポート出力
    VS Codeの標準機能にはない。
    ただし、Git環境の場合はgit diffコマンドで比較結果を出力できる。
    探せば他の拡張機能で実現できるのかもしれない。

補足情報：VS Codeの比較機能で出来ない事を実現するには

従来の比較ツールを併用する事で、しっかりと証跡（エビデンス）を残す事ができます。
WinMergeの場合、HTML形式で出力可能で表形式にも置き換えできる。

また、以下の記事で紹介されている方法を参考にすると、PowerShellだけで比較結果をアウトプットする事もできそうです。

ソースコード紹介：参考情報を元に私が作成したFunction「DiffTextfile」 < クリックで折りたたみが開く >

PowerShell_ShapingXMLfileTool\source\powershell\Main.ps1 - DiffTextfile
https://github.com/akiGAMEBOY/PowerShell_ShapingXMLfileTool/blob/master/source/powershell/Main.ps1#L294-L354

まとめ

  • VS Codeで差分を比較する方法
    • キーボード操作で比較
      コマンドパレット（ Ctrl + Shift + P or F1 ）で「 compare or 比較 」を入力し比較
    • マウス操作で比較
      アクティビティ バーのエクスプローラーで比較対象を右クリックメニューから選択し比較

関連記事

https://haretokidoki-blog.com/pasocon_powershell-startup/
https://zenn.dev/haretokidoki/articles/7e6924ff0cc960

GitHubで編集を提案

Discussion