WebStorm 2018.1 Help

Differences Viewer for Folders

Project tool window | context menu of a folder | Compare Directory with
Project tool window | context menu of two selected folders | Compare Directories
Project tool window | context menu of a folder | Sync with Deployed to
Remote Host tool window | context menu of a folder | Sync with local

This window is displayed when you explore the differences between:

This dialog lets you explore the differences and synchronize the folders you are comparing.

Toolbar

ItemTooltip and shortcutDescriptionAvailable for
arrowDown arrowUp F7
Shift+F7
Use these buttons to jump to the next/previous difference.

When the last/first difference is hit, WebStorm suggests to press F7 /Shift+F7 once more and compare other files.

Version control
editJump to Source
F4
Click this button to open file in the editor's active tab. The caret will be placed in the same position as in the Differences Viewer. All
refreshRefresh
F5
Click this button to refresh the contents of the differences viewer.All
arrow right Show new files on left side Click this button to 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
external toolShow diff in external toolClick this button to invoke an external differences viewer, specified in 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
not equalShow differenceClick this button to display items that are present in both folders or database objects but have different contents, timestamp, or size.All
equalShow equal files Click this button to 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 drop-down list. All
arrow leftShow new files on right sidePress this toggle button to have WebStorm show the items, that are present in the second of the compared directories or database objects and are missing in the first one.All
Compare by From this drop-down list, select the parameter to be used for comparison. The available options are:
  • Binary Content
  • Text (charset and line separators are ignored)
  • Size
  • Size and Timestamp
Local folders
Local-remote folders
debug_resume Synchronize Selected
Enter
Click this button to have WebStorm apply the specified action to the selected pair of items. Actions to be performed are shown in the * field. All
rerun.png Synchronize All
Ctrl+Enter
Click this button to have WebStorm apply the specified action to all the pairs of items in the list. Actions to be performed are shown in the * field. All
commonfilter.png Hide excluded files Click this button to suppress showing files excluded from synchronization. Local-remote folders
FilterType the filtering string (for example, file or table name). Use * wildcard to replace any number of arbitrary characters.

Note that filter applies on pressing Enter.

All
Path These fields show the paths to the folders being compared. To change a directory, click Browse browseButton and specify another directory in the dialog that opens. Local folders
Local-remote folders
icon helpHelp
F1
Click this button to show reference page.All

List of items

The list shows the items from the compared objects that meet the comparison criterion specified in the Compare by drop-down list and the filtering criteria specified through the toolbar buttons.

Item Description Available for
Name These read-only fields show the names of  files  under the object specified in the  Path   fields. All
Size These read-only fields show the sizes of files under the folders being compared. Local folders
Local-remote folders
Date These read-only fields show the timestamps of files under the folders being compared. Local folders
Local-remote folders
* The icon in this field indicates the action that will be applied to the pair of items in the current line upon clicking the Synchronize Selected debug_resume.gif or Synchronize All rerun.png  toolbar button.

To change the currently selected action, click the icon.

IconAction
arrow right Copy the item in the left side to the right side, possibly overwriting the contents of the corresponding target item, if it already exists.
arrow left Copy the item in the right side to the left side, possibly overwriting the contents of the corresponding target item, if it already exists.
equal The items are treated identical with regard to the selected criterion of comparison. No action will be performed by default.
not equal The items differ with regard to the selected criterion of comparison. No action will be performed by default. Explore the differences in the Differences Pane and change the intended action by clicking the icon.
close.png The item is present only in one of the folders and will be removed.
All

Differences pane

The differences pane is displayed only for files  with the same names, which exist on both sides. For the files and DB objects that exist on one side only, the contents of the selected file/DB object is displayed.

If the files have read-only status, they are not editable in the differences pane.

Diff viewer

ItemTooltip and ShortcutDescription
arrowUparrowDownPrevious Difference / Next Difference Shift+F7 F7
Use these buttons to jump to the next/previous difference.

When the last/first difference is hit, WebStorm suggests to click the arrow buttons F7/Shift+F7 once more and compare other files, depending on the Go to the next file after reaching last change option in the Differences Viewer settings.

This behavior is supported only when the Differences Viewer is invoked from the Version Control tool window.

comparePreviousFile
compareNextFile
Compare Previous/Next File
Alt+LeftAlt+Right
Click these buttons to compare the local copy of the previous/next file with its update from the server.
icon show paths Go To Changed File Ctrl+NClick this button to display all changed files in a current change set (and navigate to them).
edit Jump to Source
F4
Click this button to open the selected file in the active pane in the editor. The caret will be placed in the same position as in the Differences Viewer.
Viewer type
diffViewer type
Use this drop-down list to choose the desired viewer type. The side-by-side viewer has two panels; the unified viewer has one panel only.

Both types of viewers enable you to

  • Edit code. Note that one can change text only in the right-hand part of the default viewer, or, in case of the unified viewer, in the lower ("after") line, i.e. in your local version of the file.
  • Perform the Apply/Append/Revert actions.
Whitespace
diffViewer whitespaces
Use this drop-down list to define how the differences viewer should treat white spaces in the text.
  • Do not ignore: white spaces are important, and all differences are highlighted. This option is selected by default.
  • Trim whitespaces: ("\t", " "), if they appear in the end and in the beginning of a line.
    • If two lines differ in trailing whitespaces only, these lines are considered equal.
    • If two lines are different, such 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: 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, changing a b c to a \n b c is not highlighted in this mode.
Highlighting mode
diffViewer highlight
Select the way differences granularity is highlighted.
The available options are:
  • Highlight words: the modified words are highlighted
  • Highlight lines: the modified lines are highlighted
  • Highlight split changes: if this option is selected, big changes are split into smaller 'atomic' changes.
    For example, A \n B vs. A X \n B X will be treated as two changes instead of one.
  • Do not highlight: if this option is selected, the differences are not highlighted at all. This option is intended for significantly modified files, where highlighting only introduces additional difficulties.
collapseAll Collapse unchanged fragmentsClick this button to collapse all unchanged fragments in both files. The amount of non-collapsible unchanged lines is configurable in the Diff & Merge settings page.
sync scrollingSynchronize scrollingClick this button to simultaneously scroll both differences panes; if this button is released, each of the panes can be scrolled independently.
cogwheel blue with arrow Editor settingsClick this button to invoke the list of available settings. Select or clear this options to show or hide whitespaces, line numbers and indent guides, to use or disable the use of soft wraps, and to set the highlighting level.

These commands are also available from the context menu of the differences viewer gutter.

Include into commit Alt+I This checkbox only appears if you invoke the Differences Viewer from the Commit Changes dialog with multiple changed files (all of which are deselected), and you explore the differences between them and hit the last difference in a file.

Select this checkbox if you want to include the file you've reviewed into the commit.

moveToOtherChangelist Move to Another Changelist F6 This button only appears if you invoke the Differences Viewer from the Commit Changes dialog with multiple changed files (all of which are deselected), and you explore the differences between them and hit the last difference in a file.

Click this icon to move the file you've reviewed to another changelist.

external toolShow diff in external toolClick this button to invoke an external differences viewer, specified in the External Diff Tools settings page.

This button only appears on the toolbar when the Use external diff tool option is enabled in the External Diff Tools settings page.

icon helpHelp
F1
Click this button to show the corresponding help page.
Ctrl+TabUse this keyboard shortcut to switch between the panes of the Differences viewer. The active pane has the cursor.
icon InsertReplaceicon InsertReplace2Use these chevron buttons to 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 icon InsertReplaceicon InsertReplace2 to apply changes. This behavior is the default one.
  • Press Ctrl to change icon InsertReplace icon InsertReplace2 to arrowRightDown or arrowLeftDown and append changes.

Context menu

This 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 on clicking Synchronize Selected or Synchronize All. The selected action appears in the * column.

ItemIconDescription
Set Copy to Right/Leftarrow right
arrow left
This command sets the specified icons in the * column to copy a file missing from one of the directories. If a file exists on one side, it will be copied; if it doesn't exist, then the file on the other side will not be deleted.
Set Deleteclose.pngThis command sets the specified icons in the * column to delete file.
Set Do NothingChoose this command to remove an action icon.
Set Mirror to Right mirror right icon Choose this command to automatically set actions in the * column that will mirror the contents of the left folder in the right folder when you click Synchronize All.
Set Mirror to Left mirror left icon Choose this command to automatically set actions in the * column that will mirror the contents of the right folder in the left folder when you click Synchronize All.
Set DefaultChoose this command to set the default action for the entry.
Warn When DeleteSelect this option to display a warning when trying to delete a file that is located only in one of the two directories during their merge.
dbe compareFolders

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.

Applying operations:

  • debug resume (Enter) applies the operations to selected files.
  • rerun (Ctrl+Enter) applies the operations to all the files.
IconDescription
arrow right 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.

not equal 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:

  • icon InsertReplace or icon InsertReplace2 or Replace. Replace the fragment with the one from the other pane.
  • arrowRightDown or arrowLeftDown or Insert. Insert the fragment into the other pane.
  • Remove. Remove the corresponding fragment.

To undo the changes, use Ctrl+Z.

equal For the selected comparison criterion, the files are identical. No operation is assumed.
arrow left 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.

close.png Delete the file. The operation is not available for files that exist in both folders.
Last modified: 20 July 2018

See Also