Differences Viewer for Files
This dialog is displayed every time you compare two files or two versions of a file (local changes or changes between local files and their revisions in a remote repository). You can compare files of any types, including binaries and
Note that you can open the differences viewer without running WebStorm. To do this, execute the following command:
<path to WebStorm executable file> diff <path_1> <path_2>
The differences viewer provides a powerful editor that enables code completion, live templates, etc.
Diff & Merge viewer
Tooltip and Shortcut
Previous 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.
Compare Previous/Next File
|Click these buttons to compare the local copy of the previous/next file with its update from the server.|
Go To Changed File Ctrl+N
Click this button to display all changed files in a current change set (and navigate to them).
Jump to Source
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.
| 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
|Use this drop-down list to define how the differences viewer should treat white spaces in the text. |
|Select the way differences granularity is highlighted. |
The available options are:
Collapse unchanged fragments
Click 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.
Click this button to simultaneously scroll both differences panes; if this button is released, each of the panes can be scrolled independently.
|Click this button to invoke the list of available settings. Select or clear these 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.
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.
Show diff in external tool
|Click 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.
Click this button to show the corresponding help page.
Use this keyboard shortcut to switch between the panes of the Differences viewer. The active pane has the cursor.
|Use 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 this icon to invoke the list of options allowing you to compare different versions of a file to resolve a conflict. Note that Base refers to the file version that the local and the repository versions originated from (initially displayed in the middle pane), while Middle refers to the resulting version.
Apply All Non-Conflicting Changes
Click this button to apply all non-conflicting changes. You can also make this behavior automatic, by selecting the checkbox Automatically apply non-conflicting changes in the Diff & Merge page of the Settings/Preferences dialog.
Apply Non-Conflicting Changes from the Left/Right Side
Click these buttons to merge non-conflicting changes from the left/right parts of the dialog.
This option is only available from the context menu of the gutter.
Use this option to explore who introduced which changes to the repository version of the file in question, and when. The annotations view lets you see detailed information for each line of code, such as the version from which this line originated, the ID of the user who committed this line, and the commit date.
For more details on annotations, refer to Using annotations
Use this keyboard shortcut to show the popup menu of the most commonly used diff commands.
Use this keyboard shortcut to switch between the left and the right panes.
Use this keyboard shortcut to select the position obtained by Ctrl+Tab in the opposite pane.
Use this keyboard shortcut to undo/redo a merge operation. Conflicts will be kept in sync with the text.
Context menu commands
This context menu is available in the middle of the editor:
Select this check command to show whitespaces as the dots in the Differences Viewer .
Show Line Numbers
Select this check command to show line numbers in the Differences Viewer.
Show Indent Guides
Select this check command to have WebStorm display vertical lines in the Differences Viewer to indicate positions of indents.
Use Soft Wraps
Select this check command to have WebStorm wrap the lines of code, when the dialog box is resized.
|Select this check command to annotate the changes.|
This context menu is available in both editors:
Select these commands to accept or append the lines shown in the Differences Viewer.
Compare with Clipboard
Select this command to compare the file in the respective pane of the Differences Viewer with the contents of the Clipboard .
|Select this check command to annotate the changes.|
This context menu is available in the right-hand strip of the Differences Viewer:
Go to high-priority problems only/Go to next problem
Click one of these radio-buttons to define the way of navigating between the encountered problems.
Customize highlighting level
Click to show the slider to change the highlighting level in the Differences Viewer.
Show code lens on scrollbar hover
Select this checkbox to switch the Differences Viewer to the lens mode.