Visual Studio Code（VSCode）は、軽量かつ高機能なエディタであり、Gitとの連携や差分（Diff）の比較が簡単に行えます。コードの変更をチェックしたり、ファイルの違いを比較する際に便利な機能が揃っています。
本記事では、VSCodeを使って差分を比較する方法をいくつか紹介します。
[目次を開く]
1. VSCodeで2つのファイルの差分を比較する方法
VSCodeでは、2つのファイルの違いを直接比較することができます。手順は以下の通りです。
コマンドパレットを使う
-
Ctrl + Shift + Pでコマンドパレットを開く。 -
Compareと入力し、Files: Compare Active File With...を選択。 - 比較したいファイルを選択する。
- 差分が表示される。
コマンドパレットを使うことで、開いているファイル同士を簡単に比較できます。
VSCodeの「Compare（比較）」機能について補足
Files: Compare Active File With... の他にも以下の種類があります。
| Compareの種類 | 機能詳細 |
|---|---|
| Compare Active File With… | 現在開いているファイルを別のファイルと比較 |
| Compare Active File with Saved | 現在開いている最後に保存した状態と比較 |
| Compare Active File with Clipboard | 現在開いているファイルとクリップボードを比較 |
2. Gitを使用した差分の比較
VSCodeはGitと強く統合されており、リポジトリ内の変更を素早く確認できます。
方法① ソース管理ビューを使う
-
Ctrl + Shift + G Gもしくは、上記の画像の赤丸のアイコンをクリックし ソース管理ビューを開く。 - 変更のあるファイルがリストアップされるので、クリックする。
- 変更前と変更後のファイルが並んで表示され、差分がハイライトされる。
この方法は、Gitリポジトリを使用している場合に便利です。
方法② コマンドラインを使う
ターミナル（Ctrl + ＠ ）を開いて、以下のコマンドを実行すると、VSCodeの差分ビューを開くことができます。
git difftool --tool=code --dir-diffまた、特定のブランチ間の差分をVSCodeで確認する場合は、以下のコマンドを実行します。
git difftool main feature-branch3. 拡張機能を使ってより高度な比較を行う
VSCodeには、より高度な差分比較を行うための拡張機能が用意されています。以下の拡張機能を導入すると、さらに便利に使えます。
① "Partial Diff"
- 2つのテキスト選択範囲の差分を比較可能
- 同じファイル内の異なる部分を比較できる
-
Partial Diffコマンドを実行することで使用可能
② "GitLens — Git supercharged"
- Gitの変更履歴を詳細に可視化
- 過去のコミット間の差分を簡単に比較
- ファイル単位で変更のハイライト表示が可能
これらの拡張機能をインストールすると、差分の比較がより直感的になります。
4. VSCodeの差分比較を活用する場面
① コードレビュー
チーム開発では、Pull Request（PR）をレビューする際に変更点をチェックする必要があります。VSCodeを使えば、リモートリポジトリとローカルのファイルの差分をすぐに比較できます。
② 設定ファイルの変更比較
設定ファイル（config.json や .env など）が意図せず変更されていないかをチェックする際にも、VSCodeの差分機能が役立ちます。
③ 過去バージョンとの比較
以前のバージョンと現在のファイルの違いを確認することで、バグの発見やリファクタリングの際の変更点を素早く把握できます。
まとめ
VSCodeには、ファイルの差分を簡単に比較できる機能が充実しています。
これらの方法を活用することで、VSCodeを使った差分比較がよりスムーズに行えるようになります。ぜひ試してみてください！
