🗂

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

2023/11/22に公開

概要

コードやファイルの差分を比較する際は、今まで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 + KCtrl + \ 上下分割を開始
Ctrl + KShift + 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