VS Codeでファイルを比較し、差分（diff）を表示するには：Visual Studio Code TIPS

連載「Visual Studio Code TIPS」

　Visual Studio Code（以下、VS Code）には2つのファイルの内容を比較して（diffを取って）、その差を分かりやすく表示してくれる機能が内蔵されている。なお、本稿の内容はWindows版のVS Code（64ビット版）のバージョン1.24で動作を検証している。

2つのファイルの内容を比較する

　VS Codeで現在アクティブなファイルともう1つのファイルの内容を比較するには、コマンドパレットを表示したら、「compare」などと入力してから［ファイル: アクティブ ファイルを比較しています］コマンドを実行して、比較対象のファイルを指定する（ここでいう「現在アクティブなファイル」とは、VS Codeのエディタ（タブ）で編集対象になっているファイルのこと）。例えば、以下は内容がよく似ている2つのファイルを比較しているところだ。

［ファイル: アクティブ ファイルを比較しています］コマンドを実行

▼

比較対象のファイルを選択

▼

比較結果が表示される

ファイルの比較

　このときには、比較元のファイルの内容がエディタの左側に、比較対象のファイルの内容が右側に表示される。また、異なる部分を含む行全体の背景色が薄い赤／緑で表され、濃い赤／緑の背景色になっているところが、実際に異なっているところだ。比較元のファイルで「-」になっている行は比較対象のファイルにはない行を、比較対象のファイルで「+」になっているのは比較対象のファイルで追加された行を意味している。つまり、比較元の「-」行を削除して、比較先の「+」行を追加することで、比較元のファイルが比較対象のファイルと同じになる。

　上の画像では、差分を表示するエディタが左右に分割され、それぞれのファイルの内容が色付きで表示されているが、このタブの右端にある［…］ボタンをクリックして、コンテキストメニューから［インライン表示に切り替え］を選択すると、変更内容がインライン（1つのエディタ画面）にまとめて表示されるようになる。

［インライン表示に切り替え］を選択

▼

インラインで差分が表示されるようになった

インラインで差分を表示

　また、上で見た［…］ボタンの隣にある2つの矢印ボタンは前／次の変更箇所に移動するためのボタンだ。このボタンを使って、2つのファイルの相違点を確認しながら、「比較対象」（2つ目）のファイルを編集できる（最初に示した左右分割の形式なら、エディタの右側に表示されているファイルのみ編集可能であり、左側のファイルの内容は変更不可）。

　なお、［エクスプローラー］ビューからもファイルの比較を行える。簡単に手順を紹介しておこう。まずは［エクスプローラー］ビューで比較元のファイルを右クリックして、コンテキストメニューから［比較対象の選択］をクリックする。少々分かりづらいのだが、コンテキストメニューに表示されている「比較対象」とは本稿で「比較元」としてきたファイルに相当する。例えば、以下の画像ではsample1.mdファイルを「比較対象」（本稿でいうところの「比較元」）のファイルとしている。この選択は、［比較対象の選択］を再度行わない限りは有効である。

比較元のファイルを選択

　次に［比較対象の選択］コマンドで選択したファイルと比較したいファイルを「右クリック」して、コンテキストメニューから［選択項目と比較］を選ぶ（以下の画像ではsample2.mdファイル）。これにより先ほどと同様に差分を表示するエディタが開かれる。さらに別のファイルを右クリックしてコンテキストメニューから［選択項目と比較］を選択すると、今度は最初に［比較対象の選択］コマンドで選択したファイルとその別ファイルとの比較が行われる。

［選択項目と比較］を選んで、差分を表示する

アクティブなファイルとクリップボードの内容を比較する

　同様な操作で、現在アクティブなファイルとクリップボードの内容を比較することも可能だ。これにはコマンドパレットを開いて、「compare」などと入力してから、［ファイル: クリップボードとアクティブ ファイルを比較］コマンドを実行すればよい。

クリップボードとアクティブなファイルの内容を比較

　これは、インターネット上で参照可能なファイルと、自分の書いたローカルなファイルの内容を比較したいといったときに役立つだろう。この機能を使えば、インターネットで見たファイルをいちいちローカルにダウンロードせずに、クリップボードにコピーして、それをローカルなファイルと比較できる。

「Visual Studio Code TIPS」