VSCode 拡張機能なしのファイル比較

# はじめに
VSCode では**拡張機能なし**で**ファイルの比較**ができます。
保存済みファイル同士の比較はもちろん、新規の未保存のままのファイルでも保存済みのファイルと比較することができるし、二つの未保存ファイル同士を比較することもできます。
また、Git 風に保存済みファイルと作業中のファイルを比較することもできます。
今回は 未保存ファイルや編集中のファイルに焦点を当てて、VSCode でのファイル比較をまとめてみました。
 [1. アクティブファイルを決めてファイルを比較](#アクティブファイルを決めてファイルを比較)
ファイルを開くなりタブを切り替えるなりして、どれか一つのファイルをアクティブにしてから、比較するもう一方のファイルを選択してファイルを比較するやり方です。
最初のアクティブファイルも、比較するもう一方のファイルも、保存済みのファイルでも未保存のファイルでも構いません。
 [2. 保存済みファイルと作業中のファイルを比較](#保存済みファイルと作業中のファイルを比較)
<font color="Red">こちらは同一ファイル内での変更前（前回保存）と変更後の比較です。</font>
具体的には、保存してあるファイルを開いて変更を加えたとします。
そのときにファイルを新たに保存する前に、変更箇所の差分をわかりやすく可視化することができます。
 [3. 二つの未保存ファイルを比較](#二つの未保存ファイルを比較)
ファイル名を決める前の二つの未保存ファイル同士でもファイルの差分を比較することができます。
上記のアクティブファイルを決めてファイルを比較する方法でもできますが、もっと簡単な方法が用意されています。そちらのやり方では、最初に両者比較可能な新しい無題のテキストファイルを二つ作成してくれます。

言葉だけだとよくわからないと思うので、順番に具体例を挙げながら実際に見ていきたいと思います。

# ①アクティブファイルを決めてファイルを比較
1. VSCode で保存済みのファイルを開く（アクティブファイル）
![q01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/8d93fd8a-c6ab-71cf-ed6c-a85447a1635f.png)
1. メニューバーの「**表示**」->「**コマンド パレット**」、
または、「**Ctrl + Shift + P**」でコマンドパレットを表示する
1. 検索窓に「compare」または「比較」などを入力して検索する
![q3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/6a0df410-3cd1-b817-e03f-41814ae04fa3.png)
1. 「**ファイル: アクティブ ファイルを比較しています...
File: Compare Active File With...**」を選択する
![q02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/b7042489-9667-4362-e88f-c40e0ef1190c.png)
1. 最初のアクティブファイルと比較する保存済みのファイルを選択する
![q03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/dbc936e8-7c68-6815-b51b-ca61cb1bfada.png)
1. 二つの保存済みファイルの差分を表示
![q04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/490de1f9-01a2-899c-ac9c-e56a6ddbd1bc.png)
「<font color="Red">→</font>」をクリックすると、「<font color="Red">変更を元に戻す</font>」ことができます。
1. 次に保存済みファイルと未保存ファイルの比較を試してみます。
 (1) まず新しい無題のテキストファイルを作成する
メニューバーの「**ファイル**」->「**新しいテキスト ファイル**」、
または、「**Ctrl + N**」で作成する
 (2) それから上記の **test2.txt** の中身を無題のテキストファイルにコピペする
準備は以上。あとは保存済みファイル同士の比較の手順と同じ
![q05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/97b3b982-6267-0fab-0265-979f7caa5df5.png)
1. 保存済みファイル（**test.txt**）のタブをアクティブにしてから、コマンドパレットを表示させて、
「**ファイル: アクティブ ファイルを比較しています...
File: Compare Active File With...**」を選択する
1. アクティブファイルと比較する無題のテキストファイルを選択する
![q06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/d448bc33-6e9c-02ad-4c89-b1d63037fbc1.png)
1. 保存済みファイルと未保存ファイルの差分を表示
![q07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/29bae2d7-0fef-53b6-1992-c0e4e43c0957.png)
1. 以上と同様の手順で、無題のテキストファイルをアクティブにして、保存済みファイルと比較したり、未保存ファイル同士を比較したりすることも可能
<a id="title2"></a>
# ②保存済みファイルと作業中のファイルを比較
<font color="Red">同一ファイル内での変更前（前回保存）と変更後の比較です。</font>
1. VSCode で保存済みのファイル開く
![q1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/9a2dedc9-98a2-c3d1-99f0-6ec58adae7b4.png)
1. ファイルに変更を加える（未保存のまま）
![q2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/997f6e71-369a-0adf-f027-1b6a5bb3f813.png)
1. メニューバーの「**表示**」->「**コマンド パレット**」、
または、「**Ctrl + Shift + P**」でコマンドパレットを表示する
1. 検索窓に「compare」または「比較」などを入力して検索する
![q3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/0d7e8b46-61c9-9bf8-8364-0078239bc5b0.png)
1. 「**ファイル: 保存済みファイルと作業中のファイルを比較
File: Compare Active File with Saved**」を選択する
![q3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/65620205-c3a4-0b4a-6444-2d6fedcb496b.png)
1. ファイル内の変更箇所の差分を表示
![q4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/a907d956-e8b0-9a3d-cbe0-66d0a60a6dca.png)
「<font color="Red">→</font>」をクリックすると、「<font color="Red">変更を元に戻す</font>」ことができます。
そのまま画面の幅を縮めていくと、二分割の画面が一画面表示に切り替わります。
![q5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/88fde3fa-f0ca-559e-8faa-7803a76c30bd.png)
再び画面を広げていくと、二分割の画面表示に切り替わります。
画面の幅を調整することで、お好みの画面表示にすることができます。
（他のファイル比較の方法でも同様です）
<a id="title3"></a>
# ③二つの未保存ファイルを比較
1. メニューバーの「**表示**」->「**コマンド パレット**」、
または、「**Ctrl + Shift + P**」でコマンドパレットを表示する
1. 検索窓に「compare」または「比較」などを入力して検索する
![q3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/176f0922-b86e-4576-f19c-f16688a73c44.png)
1. 「**ファイル: 新しい無題のテキスト ファイルの比較
File: Compare New Untitled Text Files**」を選択する
![q6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/67996a27-44ce-92a8-cba9-41d15f5d58b7.png)
1. それぞれのファイルに書き込むと、自動でファイルの差分を表示
![q7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1958320/9fe13c36-5a9f-9044-b7b1-b2019fbee8e2.png)
# 補足
:::note
上記で説明した以外にも、アクティブファイルとクリップボードを比較することもできます。
また、Windows の PowerShell や WSL などで、下記のコマンドを使って、
VSCode を自動で立ち上げてファイルを比較することもできます。
`code -d <ファイルパス1> <ファイルパス2>`
例、
`code -d test.txt test2.txt`
こちらも覚えておくと便利です。
:::