VSCodeのフォルダ比較
VSCodeにはファイル同士を比較する標準機能がある。エクスプローラーで「比較対象の選択」と「選択項目と比較」を使う方法や、code -d file1 file2で開く方法である。
一方、フォルダ同士をまとめて比較する機能はVSCodeに標準搭載されていない。バックアップとの差分確認やリリース物の検証でフォルダ全体を比較したい場合は拡張機能を導入する。
代表的な拡張機能は次の2つである。
| 拡張機能 | 特徴 |
|---|---|
| Compare Folders | サイドバーのツリーに差分を表示する。VSCodeのUIに馴染む |
| Diff Folders | 専用パネルに一覧を表示する。キーボード操作とお気に入り管理が充実 |
Compare Folders
Compare Folders はサイドバーに差分ツリーを表示する拡張機能である。
インストールはコマンドラインからも実行できる。
$ code --install-extension moshfeu.compare-folders
フォルダを選択して比較する
比較するフォルダの選び方は3通りある。
1つめはコマンドパレット（Cmd+Shift+PまたはCtrl+Shift+P）からの実行である。次のコマンドを使う。
| コマンド | 動作 |
|---|---|
CompareFolders: Choose 2 Folders and Compare | 任意の2フォルダを選んで比較する |
CompareFolders: Compare a Folder Against Workspace | 開いているワークスペースと指定フォルダを比較する |
CompareFolders: Pick from recent compares | 過去に比較したフォルダの組み合わせを再利用する |
2つめはエクスプローラーからの実行である。Cmd（WindowsとLinuxはCtrl）を押しながらフォルダを2つ選択し、右クリックして[Compare Folders] Compare selected foldersを選ぶ。
3つめはアクティビティバーの「Compare Folders」アイコンから開くパネルである。パネル内の「Click to select folders」をクリックすると、フォルダ選択ダイアログが2回表示される。
比較が完了すると、サイドバーに差分のあるファイルが一覧表示される。ファイルを選択するとエディタに差分が開く。
一覧の表示を切り替える
差分一覧のツールバーには次の操作がある。
| 操作 | 動作 |
|---|---|
| Swap Sides | 左右のフォルダを入れ替える |
| Refresh | ファイルを変更したあとに再比較する |
| View as List / View as Tree | 一覧をフラットな一覧とツリーで切り替える |
初期表示をツリーと一覧のどちらにするかは設定で指定する。
{
"compareFolders.defaultDiffViewMode": "list"
}
差分がないファイルも一覧に表示したい場合はshowIdenticalを有効にする。セクション名にファイル数を表示するshowFileCountも併用すると全体像を把握しやすい。
{
"compareFolders.showIdentical": true,
"compareFolders.showFileCount": true
}
ファイルを同期する
差分一覧のファイルを右クリックすると、片側の内容をもう片側へ反映するメニューが表示される。
| メニュー | 動作 |
|---|---|
| Take My File | 自分側のファイルで比較先のファイルを上書きする |
| Take Compared File | 比較先のファイルで自分側のファイルを上書きする |
| Copy to Compared Folder / Copy to My Folder | 片側にしか存在しないファイルをもう片側へコピーする |
| Delete File | ファイルを削除する |
| Dismiss Difference | 一覧から一時的に除外する |
| Exclude from Comparison | excludeFilterに追加して以後の比較から除外する |
上書きと削除は実ファイルを変更する。誤操作を防ぐため、確認ダイアログを表示するwarnBeforeTakeとwarnBeforeDeleteは有効のまま使うほうが安全である。
比較対象を絞り込む
node_modulesや.gitのようなフォルダが差分に混ざると一覧が読みにくい。excludeFilterにglobパターンを指定して除外する。
{
"compareFolders.excludeFilter": [
"**/node_modules",
"**/.git",
"**/dist"
]
}
Gitリポジトリ同士の比較ならrespectGitIgnoreを有効にすると.gitignoreのルールを反映できる。ただしサブフォルダの.gitignoreは対象外である。
{
"compareFolders.respectGitIgnore": true
}
逆に特定のファイルだけを比較する場合はincludeFilterを使う。
差分の判定条件を調整する
Compare Foldersはデフォルトでファイルの内容を比較する（compareContentがtrue）。無効にするとファイル名のみで比較するため、内容の違いは検出されない。
改行コードや空白の違いを無視する設定もある。CLIのdiffコマンドのオプションに対応している。
| 設定 | 動作 | 対応するdiffのオプション |
|---|---|---|
ignoreLineEnding | CRLFとLFの違いを無視する | - |
ignoreWhiteSpaces | 行頭と行末の空白の違いを無視する | diff -b |
ignoreAllWhiteSpaces | すべての空白の違いを無視する | diff -w |
ignoreEmptyLines | 空行の違いを無視する | diff -B |
WindowsとmacOSで作成したフォルダを比較する場合はignoreLineEndingが役立つ。
{
"compareFolders.ignoreLineEnding": true
}
環境ごとの設定ファイルを比較する場合はignoreStringsが便利である。指定した文字列だけが異なるファイルを同一とみなす。
{
"compareFolders.ignoreStrings": ["dev", "staging", "prod"]
}
上記の設定ではdevとprodの違いのみのファイルは差分として扱われない。ignoreStringsはcompareContentが有効な場合にのみ働く。また比較対象のテキストファイルをすべてメモリ上で変換するため、大きいファイルでは遅くなる。
ターミナルから比較する
環境変数COMPARE_FOLDERSにDIFFを指定してcodeコマンドを実行すると、VSCodeの起動時に比較結果が開く。
$ COMPARE_FOLDERS=DIFF code path/to/folder1 path/to/folder2
codeコマンドについては以下を参照。
Diff Folders
Diff Folders （L13 Diff）は専用パネルで比較する拡張機能である。キーボード操作と比較対象のお気に入り管理が充実している。
$ code --install-extension L13RARY.l13-diff
以降のショートカットはmacOSの表記である。WindowsとLinuxではCmdをCtrlに読み替える。
パネルを開いて比較する
Cmd+Lを2回続けて押すと比較用のパネルが開く。コマンドパレットの「New Diff Panel」でも開ける。
パネル上部に左右2つの入力欄がある。フォルダのパスを直接入力するか、右のボタンからフォルダを選択する。エクスプローラーからのドラッグアンドドロップでも指定できる。
指定後に入力欄でEnterを押すか、「Compare」ボタンをクリックすると比較が始まる。入力欄以外にフォーカスがある場合はCmd+Cでも比較を開始できる。
結果は次の状態に分類されて一覧表示される。
| 状態 | 意味 |
|---|---|
| created | 右側にのみ存在する |
| deleted | 左側にのみ存在する |
| modified | 両方に存在し内容が異なる |
| unchanged | 両方に存在し内容が同じ |
| conflicting | 同名だが種類が異なる（ファイルとフォルダなど） |
| ignored | 除外設定に該当する |
Cmd+Alt+1からCmd+Alt+5で、unchanged、deleted、modified、created、ignoredの表示を順に切り替えられる。Cmd+Fで開くフィルタは正規表現に対応している。
一覧を操作する
一覧ではShift+クリックで範囲選択、Cmd+クリックで個別選択ができる。選択後の主な操作は次のとおりである。
| 操作 | ショートカット |
|---|---|
| 選択したファイルをもう片方のフォルダへコピー | ツールバーの左右のコピーボタン |
| 選択したファイルを削除 | Cmd+Backspace（WindowsとLinuxのみDelete） |
| 左右の入力欄を入れ替え | Cmd+S |
| 入力欄と一覧をまとめて入れ替え | Cmd+Alt+S |
| すべて選択 | Cmd+A |
削除時は左側と右側のどちらを削除するかを選ぶダイアログが表示される。削除をOSのゴミ箱経由にするにはenableTrashを設定する。
{
"l13Diff.enableTrash": "on"
}
お気に入りに登録する
比較したフォルダの組み合わせはCmd+Dでお気に入りに登録できる。定期的に同じフォルダを比較する場合に有効である。
お気に入りはグループにまとめられる。グループの「Compare All」を実行すると、グループ内のすべての組み合わせを一度に比較する。お気に入りはJSONファイルとしてエクスポートとインポートができるため、別のマシンへ持ち運べる。
比較対象を絞り込む
l13Diff.excludeにglobパターンを指定する。デフォルトで.gitやnode_modulesなどが除外されているため、追加したいパターンのみ書き足す。
{
"l13Diff.exclude": [
"**/.DS_Store",
"**/.git",
"**/node_modules",
"**/dist"
]
}
比較先フォルダに.vscode/settings.jsonがある場合、Diff Foldersはそのファイルの除外設定も参照する。
比較の条件を調整する
主な設定は次のとおりである。
| 設定 | デフォルト | 動作 |
|---|---|---|
l13Diff.ignoreEndOfLine | true | 改行コードの違いを無視する |
l13Diff.ignoreByteOrderMark | true | BOMを除いて比較する |
l13Diff.ignoreTrimWhitespace | default | 行頭と行末の空白の扱いを指定する |
l13Diff.ignoreContents | false | 内容を比較せずサイズのみで判定する |
l13Diff.maxFileSize | 0 | 内容を比較する上限サイズをMB単位で指定する（0は無制限） |
l13Diff.useCaseSensitiveFileName | detect | ファイル名の大文字と小文字の区別を指定する |
l13Diff.openToSide | false | 差分を分割ビューで開く |
巨大なバイナリを含むフォルダの比較が遅い場合は、maxFileSizeで上限を設けるかignoreContentsでサイズ比較に切り替える。
{
"l13Diff.maxFileSize": 10
}
使い分け
どちらの拡張機能もフォルダ比較とファイルの同期に対応している。選ぶ基準は次のとおりである。
Compare Foldersはサイドバーのツリーに差分を表示するため、通常のエクスプローラーと同じ感覚で扱える。ignoreStringsやfileParsingRulesのように内容の比較方法を細かく制御する設定が多く、環境別の設定ファイルの比較に向いている。
Diff Foldersは専用パネルで一覧を表示し、キーボードだけで選択とコピーを完結できる。お気に入りとグループ一括比較があるため、同じフォルダの組み合わせを繰り返し比較する用途に向いている。
参考
- Compare Folders - Visual Studio Marketplace
- moshfeu/vscode-compare-folders - GitHub
- Diff Folders - Visual Studio Marketplace
- L13/vscode-diff - GitHub
