LoginSignup
0
1

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

Last updated at Posted at 2024-02-01

はじめに

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

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

①アクティブファイルを決めてファイルを比較

  1. VSCode で保存済みのファイルを開く(アクティブファイル)
    q01.png
  2. メニューバーの「表示」->「コマンド パレット」、
    または、「Ctrl + Shift + P」でコマンドパレットを表示する
  3. 検索窓に「compare」または「比較」などを入力して検索する
    q3.png
  4. ファイル: アクティブ ファイルを比較しています...
    File: Compare Active File With...
    」を選択する
    q02.png
  5. 最初のアクティブファイルと比較する保存済みのファイルを選択する
    q03.png
  6. 二つの保存済みファイルの差分を表示
    q04.png
    」をクリックすると、「変更を元に戻す」ことができます。
  7. 次に保存済みファイルと未保存ファイルの比較を試してみます。
    (1) まず新しい無題のテキストファイルを作成する
    メニューバーの「ファイル」->「新しいテキスト ファイル」、
    または、「Ctrl + N」で作成する
    (2) それから上記の test2.txt の中身を無題のテキストファイルにコピペする
    準備は以上。あとは保存済みファイル同士の比較の手順と同じ
    q05.png
  8. 保存済みファイル(test.txt)のタブをアクティブにしてから、コマンドパレットを表示させて、
    ファイル: アクティブ ファイルを比較しています...
    File: Compare Active File With...
    」を選択する
  9. アクティブファイルと比較する無題のテキストファイルを選択する
    q06.png
  10. 保存済みファイルと未保存ファイルの差分を表示
    q07.png
  11. 以上と同様の手順で、無題のテキストファイルをアクティブにして、保存済みファイルと比較したり、未保存ファイル同士を比較したりすることも可能

②保存済みファイルと作業中のファイルを比較

同一ファイル内での変更前(前回保存)と変更後の比較です。

  1. VSCode で保存済みのファイル開く
    q1.png
  2. ファイルに変更を加える(未保存のまま)
    q2.png
  3. メニューバーの「表示」->「コマンド パレット」、
    または、「Ctrl + Shift + P」でコマンドパレットを表示する
  4. 検索窓に「compare」または「比較」などを入力して検索する
    q3.png
  5. ファイル: 保存済みファイルと作業中のファイルを比較
    File: Compare Active File with Saved
    」を選択する
    q3-2.png
  6. ファイル内の変更箇所の差分を表示
    q4.png
    」をクリックすると、「変更を元に戻す」ことができます。
    そのまま画面の幅を縮めていくと、二分割の画面が一画面表示に切り替わります。
    q5.png
    再び画面を広げていくと、二分割の画面表示に切り替わります。
    画面の幅を調整することで、お好みの画面表示にすることができます。
    (他のファイル比較の方法でも同様です)

③二つの未保存ファイルを比較

  1. メニューバーの「表示」->「コマンド パレット」、
    または、「Ctrl + Shift + P」でコマンドパレットを表示する
  2. 検索窓に「compare」または「比較」などを入力して検索する
    q3.png
  3. ファイル: 新しい無題のテキスト ファイルの比較
    File: Compare New Untitled Text Files
    」を選択する
    q6.png
  4. それぞれのファイルに書き込むと、自動でファイルの差分を表示
    q7.png

補足

上記で説明した以外にも、アクティブファイルとクリップボードを比較することもできます。
また、Windows の PowerShell や WSL などで、下記のコマンドを使って、
VSCode を自動で立ち上げてファイルを比較することもできます。
code -d <ファイルパス1> <ファイルパス2>
例、
code -d test.txt test2.txt
こちらも覚えておくと便利です。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1