VS Codeでファイル・ソースコードの差分を比較(diff)する2通りの方法
概要
コードやファイルの差分を比較する際は、今までWinMerge(ウィンマージ)を使用していましたが、
Visual Studio Code(以下、VS Code)でも比較する方法が大きくわけて2通りありました。
ファイルやソースコードなどデータの差分を比較(diff)したい場合にオススメの記事です。
この記事のターゲット
- VS Codeユーザーの方
- VS Codeでファイル・ソースコードを差分比較したい方
- A)キーボード操作で効率的に比較する方法
- B)マウス操作で簡単に比較する方法
- VS Codeの比較機能で“できること・できないこと”を知りたい方
環境
PS C:\XXXX> code -v
1.82.0
8b617bd08fd9e3fc94d14adb8d358b56e3f72314
x64
PS C:\XXXX>
補足情報: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の比較機能を呼び出して使用します。
下記が詳細な手順です。
-
VS Codeでショートカットキーを入力しコマンドパレットを表示する
コマンドパレットを表示するショートカットキー:Ctrl + Shift + P
orF1
画像:VS Codeでコマンドパレットを表示している状態 -
コマンドパレットの入力欄で「
compare
or比較
」を入力する-
compare
と入力した場合
画像:コマンドパレットで「compare
」を入力した状態 -
比較
と入力した場合
画像:コマンドパレットで「比較
」を入力した状態
-
-
目的(用途)に合わせ比較するモードを選択する
No. 比較モード 用途 1 ファイル: アクティブ ファイルを比較しています...
File: Compare Active File With...現在のアクティブファイル と 指定したファイル を比較する。 2 ファイル: クリップボードとアクティブ ファイルを比較
File: Compare Active File with ClipboardCtrl + C
でクリップボードに保存された文字列 と 現在のアクティブファイル を比較する。3 ファイル: 新しい無題のテキスト ファイルの比較
File: Compare New Untitled Text Files比較モードで新規テキストファイルを2つ開いた状態となる。 4 ファイル: 保存済みファイルと作業中のファイルを比較
File: Compare Active File with Saved未編集状態のアクティブファイル と 前回保存したアクティブファイル を比較する。 5 マージの場合: 現在の競合を比較
Merge Conflict: Compare Current ConflictGit環境でブランチをマージした時にコンリクト(競合)が発生していないか比較する。 今回は1番目の「 ファイル: アクティブ ファイルを比較しています... 」を選択しEnterキーを入力、
現在のアクティブファイル と 指定したファイル を比較するモードで対応してみます。
なお、この比較モードでは、言葉のとおりアクティブ ファイルが比較対象となるため、
対象のファイルを開いた状態で起動する必要があります。 -
最近開いたもの一覧から“比較したいファイル”を選択
画像:最近開いたもの一覧から比較対象のファイルを選択 -
比較モードが起動
画像:比較モードが起動差分表示の方法を切り替えたい場合 < クリックで折りたたみが開く >
上記の差分表示は最後に選択した“比較したいファイル”が軸に表示されています。
私が操作する場合、基本的に“アクティブファイル”が最新のファイルで、“比較したいファイル”が過去のファイル。
今回の例では最新のファイルに行を追加していますので、最新のファイルを軸に黄色で強調された表示にしたいケースが多いです。
そのような場合、下記の「左側と右側を入れ替える」ボタンで変更が可能です。
画像:“左側と右側を入れ替える”ボタンを押すと...
画像:差分の表示方法が「削除された」から「追加された」に変更
B)マウス操作で簡単に比較する方法
1つひとつ選択する場合
- アクティビティ バーのエクスプローラーを表示
画像:アクティビティ バーのエクスプローラーを選択
画像:アクティビティ バーのエクスプローラーが表示された状態 - 比較対象となる1つ目のファイルを選択し右クリック
修正前・修正後を比較する場合、2つ目を最新のファイルで選択した方が、
差分がわかりやすくなる。
ココでは、修正前のファイルを選択。
画像:修正前のファイルを選択し右クリック - 表示されたコンテキストメニューから「比較対象の選択」をクリック
画像:コンテキストメニューの“比較対象の選択”をクリック - 比較対象となる2つ目のファイルを選択し右クリック
修正前・修正後を比較する場合、2つ目を最新のファイルで選択した方が、
差分がわかりやすくなる。
ココでは、修正後(最新)のファイルを選択。
画像:修正後(最新)のファイルを選択し右クリック - 表示されたコンテキストメニューから「選択項目と比較」をクリック
画像:コンテキストメニューの“選択項目と比較”をクリック - 比較モードが起動
画像:比較モードが起動
一度に2つ選択する場合
- アクティビティ バーのエクスプローラーを表示
- 比較元と比較先となるファイルを2つ選択し右クリック
選択方法は範囲選択(Shiftキー長押し+クリック
)でも部分選択(Ctrlキー長押し+クリック
)どちらでもOK - 表示されたコンテキストメニューから「選択項目の比較」をクリック
画像:2つ選択した状態で右クリック → “選択項目の比較”をクリック - 比較モードが起動
補足事項:比較機能で知っておくと便利な情報
比較モード中に便利なショートカットキー
ショートカットキー | 動作するアクション |
---|---|
“比較”モード中に 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だけで比較結果をアウトプットする事もできそうです。
- 参考情報:PowerShellで比較する方法
https://qiita.com/ktrarai/items/8bbc7566c82a3fc6d063
https://qiita.com/Kosen-amai/items/d97a16fa6f5e880b1432
ソースコード紹介:参考情報を元に私が作成したFunction「DiffTextfile」 < クリックで折りたたみが開く >
PowerShell_ShapingXMLfileTool\source\powershell\Main.ps1 - DiffTextfile
まとめ
- VS Codeで差分を比較する方法
- キーボード操作で比較
コマンドパレット(Ctrl + Shift + P
orF1
)で「compare
or比較
」を入力し比較 - マウス操作で比較
アクティビティ バーのエクスプローラーで比較対象を右クリックメニューから選択し比較
- キーボード操作で比較
関連記事
Discussion