2022年07月20日 更新

VSCodeで２つのコードを左右に並べて差分表示

どうも、クラゲジュニアです。

２つのソースコードに書かれている内容で違う箇所を素早くチェックしたい場合に便利です。VSCodeの標準機能だけで使えます。

準備

差分表示を行いたい２つのファイルを開いておきます。

上記はtest.htmlとtest2.htmlというファイルの例で、test.htmlの方を表示している状態です。

実行

メニューのView > Command Palette...を選択

テキストボックスにcompareと打ち込み、File: Compare Active File With...を選択。上記の画像では最近使っているため順番が一番上に来ていますが、初めて選択する場合は下の方にある可能性があります。

test2.htmlを選択します。

表示結果

左右に分かれて表示され、マウススクロールは連動します。差分のあるところに色が付くので素早くチェックできます。

以上です。