WebStorm 2024.2 Help

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.

Toolbar

Icon

Tooltip and shortcut

Description

Available for

the Previous Difference button/the Next Difference button

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.

Version control

the Jump to Source button

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

Refresh the contents of the Diff Viewer.

All

Show new files on left side

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

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

Show Difference

Display items that are present in both folders or database objects but have different contents, timestamp, or size.

All

Show equal files

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 sid

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

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

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

the Swap Sides button

Swap Sides

Click this button to swap the sides in the Diff Viewer.

All

Hide excluded files

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 (the Browse button) and specify another directory.

Local folders

Local-remote folders

the Help icon

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: 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: 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.

  • The items are treated identical with regard to the selected criterion of comparison: items in both objects are treated identical with regard to the selected comparison options. No action is performed.

  • The items differ with regard to the selected criterion of comparison: 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 is present only in one of the folders and will be remove: the item exists only in one of the folders and will be removed.

Also, you can apply the action by clicking Synchronize Selected Synchronize Selected or Synchronize All 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

the Previous Difference button/the Next Difference button

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.

the Compare Previous File icon

the Compare Next File icon

Compare Previous/Next File

Alt+LeftAlt+Right

Compare the local copy of the previous or next file with its update from the server.

the Go To Changed File icon

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.

the Jump to Source button

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.

the Collapse Unchanged Fragments icon

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. .

the Synchronize button

Synchronize Scrolling

Click this button to scroll both differences panes simultaneously. If this button is released, each of the panes can be scrolled independently.

the Settings button

Settings

Open a list of available settings.

These commands are also available from the context menu of the Diff Viewer gutter.

the External Tools icon

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.

the Help icon

Help

F1

Open a browser and show the corresponding help page.

apply left apply right

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 apply left and apply right to apply changes. This behavior is the default one.

  • Press Ctrl to change apply left or apply right to chevron button bottom right or chevron button bottom left 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

Set Copy to RightSet Copy to Left

Copy a file missing in one of the directories.

Set Delete

Set Delete

Delete a file.

Set Do Nothing

Remove an action icon.

Set Mirror to Right

Set Mirror to Right

Mirror the contents of the left folder in the right folder when you click Synchronize All.

Set Mirror to Left

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

Copy the file to the right-hand folder

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.

Files are not identical

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:

  • the Arrow Right icon or the Arrow Left icon or Replace. Replace the fragment with the one from the other pane.

  • the Arrow Right Down icon or the Arrow Left Down icon or Insert. Insert the fragment into the other pane.

  • Remove. Remove the corresponding fragment.

To undo the changes, use Ctrl+Z.

Files are identical

For the selected comparison criterion, the files are identical. No operation is assumed.

File exists only in the right-hand folder

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 a file

Delete the file. The operation is not available for files that exist in both folders.

Last modified: 28 June 2024