Diff Viewer for folders

This window is displayed when you explore the differences between:

By using this dialog, you can explore differences and synchronize files between different folders.

Icon	Tooltip and shortcut	Description	Available for
/	`F7` `Shift+F7`	Navigate between next and previous differences. When the last or first difference is hit, WebStorm suggests to press `F7`/`Shift+F7` once more and compare other files. This feature becomes available only when the Diff Viewer is invoked from the Version Control tool window `Alt+9`.	Version control
	Jump to Source `F4`	Open a file in the active tab of the editor. The caret is placed in the same position as in the Diff Viewer.	All
	Refresh	Refresh the contents of the Diff Viewer.	All
	Show New Files on Left Side	Display items that are present in the first of the compared directories or database objects and are missing in the second one in the left pane.	All
	Show diff in external tool	Invoke an external diff viewer. For more information about the external differences viewer, refer to the External Diff Tools page. This button is only available if the Use external diff tool option is selected in the External Diff Tools settings page.	All
	Show Difference	Display items that are present in both folders or database objects but have different contents, timestamp, or size.	All
	Show Equal Files	Display items that are present in both directories or objects and have the same contents, timestamp, and size, depending on the parameter set in Compare by list.	All
	Show New Files on Right Side	Show the items that are present in the second of the compared directories and are missing in the first one. The same rule applies to database objects.	All
	Compare by	Applies the selected parameter for comparison. You can select between the following parameters: Binary Content Text (charset and line separators are ignored) Size Size and Timestamp	Local folders Local-remote folders
	Synchronize Selected `Enter`	Apply the specified action to the selected pair of items. In the * column of the table, you can see actions that are going to be performed.	All
	Synchronize All `Ctrl+Enter`	Apply the specified action to all the pairs of items in the list. In the * column of the table, you can see actions that are going to be performed.	All
	Swap Sides	Click this button to swap the sides in the Diff Viewer.	All
	Hide excluded files	Hide files that are excluded from synchronization.	Local-remote folders
	Filter	Filter objects in comparing folders. You can type a file or table name and filter all the objects according to this name. Use the asterisk wildcard (*) to replace any number of arbitrary characters. Note that filter applies when you press `Enter`.	All
	Path	These fields show the paths to the folders that are compared. To change a directory, click the Browse button () and specify another directory.	Local folders Local-remote folders
	Help `F1`	Open a browser and show the corresponding help page.	All

Comparison table

The table lists the items that meet the comparison criterion specified in the Compare by list and the filtering criteria specified through the toolbar buttons.

Item	Description	Available for
Name	The column lists names of files that belong to the object specified in the path field.	All
Size	The column lists file sizes.	Local folders Local-remote folders
Date	The column lists file timestamps.	Local folders Local-remote folders
*	The column lists actions that will be applied to the pair of items in one row. : copy the item on the left side to the right side. This action might overwrite the contents of the corresponding target item if the target item already exists. : copy the item on the right side to the left side. This action might overwrite the contents of the corresponding target item if the target item already exists. : items in both objects are treated identical with regard to the selected comparison options. No action is performed. : the items differ according to the selected comparison options. No action is performed. You can explore the differences between objects in the Differences Pane and change the intended action by clicking its icon. : the item exists only in one of the folders and will be removed. Also, you can apply the action by clicking Synchronize Selected or Synchronize All toolbar buttons. The Synchronize Selected button applies operations only to the selected files. The Synchronize All button applies operations to all the files To change the selected action, click the action icon in the * column.	All

Differences pane

The differences pane is displayed only for files that have the same names and exist in both folders. If a file or a database object exists only in one folder, the pane displays the contents of the selected file.

To switch between the panes of the Diff Viewer, press Ctrl+Tab. The active pane has the caret.

Diff viewer

Item	Tooltip and Shortcut	Description
/	Previous Difference / Next Difference `Shift+F7` `F7`	Jump to the next or previous difference. When the last or the first difference is reached, WebStorm suggests clicking the arrow buttons or pressing `F7`/`Shift+F7` once more and comparing other files modified locally. This behavior depends on the Go to the next file after reaching last change option in the Diff Viewer settings.
	Compare Previous/Next File `Alt+LeftAlt+Right`	Compare the local copy of the previous or next file with its update from the server. These controls are only available if more than one file has been modified locally.
	Go To Changed File `Ctrl+N`	Display all changed files in the current change set and navigate to them. This action is only available when you review changes to multiple files.
	Jump to Source `F4`	Open the selected file in the editor. The caret is placed in the same position as in the Diff Viewer.
Viewers		Select a viewer mode: side-by-side or unified. The side-by-side mode has two panels, and the unified mode has one panel. You can edit code and perform the Accept, Append, Revert actions in both viewers. You can change text only in the right-hand part of the side-by-side viewer or in the lower line in the unified viewer. You can edit only local versions of your files. You cannot edit files that have read-only status.
Whitespace		Define how the Diff Viewer should treat whitespaces. Do not ignore: white spaces are important, and all the differences are highlighted. This option is selected by default. Trim whitespaces: trim whitespaces if they appear in the end and at the beginning of a line (`("\t", " ")`). If two lines differ in trailing whitespaces only, these lines are considered equal. If two lines are different, trailing whitespaces are not highlighted in the By word mode. Ignore whitespaces: white spaces are not important, regardless of their location in the source code. Ignore whitespaces and empty lines: ignores whitespaces and empty lines. The following entities are ignored: all whitespaces (as in the 'Ignore whitespaces' option) all added or removed lines consisting of whitespaces only all changes consisting of splitting or joining lines without changes to non-whitespace parts. For example, differences between `a b c` and `a \n b c` are not highlighted in this mode.
Highlighting mode		Select the way differences granularity is highlighted. The available options are: Highlight words: modified words are highlighted Highlight lines: modified lines are highlighted Highlight split changes: if this option is selected, big changes are split into smaller changes. For example, `A \n B` and `A X \n B X` are treated as two changes instead of one. Highlight characters: modified symbols are highlighted Do not highlight: if this option is selected, the differences are not highlighted at all. Use the Do not highlight option when you work with the files that were significantly modified. In such cases, highlighting might introduce additional difficulties during a review.
	Collapse Unchanged Fragments	Collapse all the unchanged fragments in both files. The amount of non-collapsible unchanged lines is configurable on the Diff & Merge settings page. To open the Diff & Merge page, open settings by pressing `Ctrl+Alt+S` and navigate to Tools \| Diff & Merge. .
	Synchronize Scrolling	Click this button to scroll both differences panes simultaneously. If this button is released, each of the panes can be scrolled independently.
	Settings	Open a list of available settings. These commands are also available from the context menu of the Diff Viewer gutter.
	Show diff in external tool	Invoke an external diff viewer specified on the External Diff Tools settings page. This button is available only on the toolbar when the Use external diff tool option is enabled on the External Diff Tools settings page.
	Help `F1`	Open a browser and show the corresponding help page.
	Accept	Apply differences between panes (in case of the side-by-side viewer) or between lines (in case of the unified viewer). The chevron buttons can change their behavior: Click and to apply changes. This behavior is the default one. Press `Ctrl` to change or to or and append changes.

Context menu

The context menu appears when you right-click an entry in the list of items. The commands in this menu define which action must be taken for the selected entry when you click Synchronize Selected or Synchronize All. The selected action appears in the * column.

Command	Icon	Description
Set Copy to Right/Left		Copy a file missing in one of the directories.
Set Delete		Delete a file.
Set Do Nothing		Remove an action icon.
Set Mirror to Right		Mirror the contents of the left folder in the right folder when you click Synchronize All.
Set Mirror to Left		Mirror the contents of the right folder in the left folder when you click Synchronize All.
Set Default		Set the default action for the entry.
Warn When Delete		Display a warning before deleting a file that is located only in one of the two directories during their merge.

File comparison statuses and intended operations are shown in the column marked with an asterisk (*). To assign or change an operation, use the context menu associated with the corresponding cell. Alternatively, click the cell or press Space one or more times.

Icon	Description
	The file exists only in the left-hand folder. The intended operation is to copy the file to the right-hand folder. If a file exists in both folders, and you apply this operation, the file in the right-hand folder is overwritten.
	For the selected comparison criterion, the files are not identical. No operation is assumed. Study the file differences in the lower part of the view. You can choose to overwrite one of the files by assigning and applying the corresponding operation. You can as well modify the file contents. This may be done by typing or by using the following buttons and context menu commands: or or Replace. Replace the fragment with the one from the other pane. or or Insert. Insert the fragment into the other pane. Remove. Remove the corresponding fragment. To undo the changes, use `Ctrl+Z`.
	For the selected comparison criterion, the files are identical. No operation is assumed.
	The file exists only in the right-hand folder. The intended operation is to copy the file to the left-hand folder. If a file exists in both folders, and you apply this operation, the file in the left-hand folder is overwritten.
	Delete the file. The operation is not available for files that exist in both folders.

Last modified: 08 October 2024