VSCodeにはファイルの差分(diff)を確認する方法が複数ある。本記事では標準機能でのファイル比較、codeコマンドからの起動、Local Historyによる過去の内容との比較、Gitの差分表示、拡張機能によるフォルダや文字列の比較を解説する。
2つのファイルを比較して差分を表示する
VSCodeでファイル同士を比較して差分を表示するには、次の手順に従う。
エクスプローラーで比較したい2つのファイルを表示する
比較元のファイルを右クリックし、「Select for Compare」（日本語の場合は「比較対象の選択」）を選択する
比較先のファイルを右クリックし、「Compare with Selected」（日本語の場合は「選択項目と比較」）を選択する
VSCodeのエディタに差分が並べて表示される。左に「比較対象の選択」で選んだファイル、右に「選択項目と比較」で選んだファイルが表示される。
差分のインライン表示
差分をインライン表示でも確認できる。
右上の…メニューから「インライン ビュー」(英語の場合はInline View)を選択すると差分がインライン表示される。
インライン表示すると以下のように差分が表示される。
ターミナルからファイルを比較する(codeコマンド)
codeコマンドで-dオプションを指定するとターミナルから直接VSCodeで差分を確認できる。
以下のように入力する。
$ code -d file1 file2
codeコマンドについては以下を参照。
開いているファイルをクリップボードと比較する
コマンドパレット(ctrl+shift+p)からFile: Compare Active File with Clipboardを選ぶと、開いているファイルとクリップボードの内容を比較できる。他のアプリからコピーしたテキストとの差分を拡張機能なしで確認できる。
比較する相手を別のファイルから選ぶ場合はFile: Compare Active File With...を選ぶ。エクスプローラーで2回右クリックするより手早く比較できる。
空白だけの違いを差分に表示する
差分エディタは既定で行頭と行末の空白の違いを無視する。インデントを変えただけの行や、行末の空白を消しただけの行は差分として表示されない。
空白の違いも差分に含めるにはdiffEditor.ignoreTrimWhitespaceをfalseにする。
{
"diffEditor.ignoreTrimWhitespace": false
}
過去の編集内容と比較する(Local History)
VSCodeはファイルを保存するたびに編集履歴を記録する。記録した履歴と現在の内容を比較できるため、Gitにコミットしていない変更を見返したい場合に役立つ。
Local Historyは既定で有効である。無効にしている場合は設定の「Local History: Enabled」で有効に戻す。
編集履歴はエクスプローラーの下の「タイムライン」に一覧される。エントリをクリックすると現在のファイルとの差分が表示される。
エントリを右クリックすると、前のエントリとの比較や、その時点の内容への復元も選択できる。
保存する履歴の件数はworkbench.localHistory.maxFileEntries(既定50件)、記録対象とするファイルサイズの上限はworkbench.localHistory.maxFileSize(既定256KB)で変更する。
Gitの差分を確認する
VSCodeはデフォルトでGitの差分を表示する機能がある。
画面左の「ソース管理」をクリックすると左ペインに「ステージされている変更(add済みの変更)」と
「変更(addしていない変更)」が一覧される。
その中のファイルを選択すると右ペインに差分が表示される。
差分表示では「→」をクリックすると差分を戻せる。
「→」をクリックしただけではファイルが保存されていないので注意。
比較に便利な拡張機能
フォルダの比較(Compare Folders)
VSCode上の2つのフォルダを比較するには拡張機能のCompare Folders を使う。
インストールすると左に「Compare Folders」のボタンが追加される。
左ペインの「Click to select folders」をクリックするとフォルダを選択するダイアログが2回表示されるので比較したいフォルダを選択する。
フォルダを2つ選択し終えると左ペインに差分があるファイルの一覧が表示される。
ファイルを選択すると右ペインに差分が表示される。
Compare Foldersの設定や他の拡張機能については以下を参照。
選択した文字列を比較(Partial Diff)
ファイル単位ではなく選択した文字列同士を比較するには拡張機能のPartial Diff を使う。
以下の手順で利用する。
- 比較したい文字列を選択する
- 右クリックし、「Select Text for Compare」を選択する
- 比較したい文字列を選択する
- 右クリックし、「Compare Text with Previous Selection」を選択する
上記手順の他にも、他のアプリでコピーしてクリップボードに入っている文字列との比較もできる。
その場合はVSCodeで比較したい文字列を選択し、右クリックし、「Compare Text with Clipboard」を選択する。
