WebStorm 2016.3 Help

Local Changes Tab

View | Tool Windows | Version Control - Local Changes
Alt+9

The Local Changes tab lists all files that have been modified locally and have not yet been committed to the repository.

Use this tab to commit and revert changes, manage changelists, view differences, and clean up locked folders.

In this topic:

Toolbar

ItemTooltip and ShortcutDescription
refresh Refresh Ctrl+F5 Click this button to refresh the status of all files in your workspace, modified both through WebStorm or through any other application.
/help/img/idea/2016.3/perforceChangesToolWindowForceRefresh.png Force Refresh This button is only available if you are using Perforce as your version control system.

Click this button to refresh the status of files in your workspace, both modified through WebStorm or through other applications.

icon_Commit Commit ChangesClick this button to check in the selected change or changelist. You can also attach and detach Perforce jobs to/from changelists via the Commit Changes dialog.
/help/img/idea/2016.3/rollback.png Revert
Ctrl+Alt+Z
Click this button to roll back the selected changes.
img New Changelist
Alt+Insert
Click this button to create a new changelist.
img Delete Changelist
Delete
Click this button to delete the selected changelist. Note that you cannot delete the default changelist.
img Set Active Changelist Click this button to make the selected changelist active. The active changelist is highlighted.
moveChangelistItems Move to Another Changelist
F6
Click this button to move the selected file to another changelist.
/help/img/idea/2016.3/shelve_silently_icon.png Shelve Silently
Ctrl+Shift+H
Click this button to shelve the selected file or changelist silently, without displaying the Shelve Changes dialog.
img Show Diff
Ctrl+D
Click this button to view the differences between your local version of the selected file and its latest version in the repository.
icon_UML.png Show Changes
Ctrl+Shift+Alt+D
Use this button to show classes from the selected changelist in a UML Class diagram (for details see Viewing Changes as Diagram).
expandAll.png  collapseAll.png Ctrl+NumPad Plus
Ctrl+NumPad -
Click these buttons to expand or collapse all nodes.
img Group by Directory
Ctrl+P
Click this button to display the changed files grouped by directories. If the button is released, the changed files are grouped by changelists.
copy Copy
Ctrl+C
Click this button to copy the path to the selected file to the clipboard.
showIgnoredFiles Show Ignored Files Click this button to show the Ignored files node with the list of existing files ignored by the VCS.
/help/img/idea/2016.3/properties.gif Configure Ignored FilesClick this button to configure the list of files that will be ignored by your version control system.
previewUsages Preview DiffClick this button to have WebStorm open or close the Preview Diff pane to compare the current file with the latest committed revision.
img F1 Click this button to show the corresponding WebStorm help page.

Changelists pane

This pane shows all your changelists, and the files that have been modified in each changelist.

If new files have been added to your project that have not yet been checked-in to a version control system, the Unversioned Files node appears under which all such files are listed. If you have a large number of unversioned files (over 50), they are not displayed in the changelists pane. Instead, the Click to browse link appears. Click this link to open the Unversioned Files dialog to review the list of unversioned files. You can quickly delete unversioned files from the Changelists pane or the Unversioned Files dialog by pressing Delete, or add them to the VCS by pressing Ctrl+Alt+A.

Context menu of a selection

ItemShortcutDescription
/help/img/idea/2016.3/icon_Commit.gif Commit Changes N/A Select this option to check in the selected file or changelist. You can also attach and detach Perforce jobs to changelists via the Commit Changes dialog.
/help/img/idea/2016.3/rollback.png Revert Ctrl+Alt+Z Select this option to roll back the selected changes.
/help/img/idea/2016.3/moveToOtherChangelist.png Move to Another Changelist F6 Select this option to move the selected item to another changelist.
/help/img/idea/2016.3/icon_showDiff.png Show Diff Ctrl+D Select this option to view the differences between your local copy and the latest version in the repository.
/help/img/idea/2016.3/edit.png Jump to Source F4 Select this option to open the selected file(s) in the editor.
/help/img/idea/2016.3/new.png New Changelist Alt+Insert This option is only available if a changelist is selected.

Select this option to create a new changelist.

/help/img/idea/2016.3/delete.png Delete Changelist N/A This option is only available if a changelist is selected.

Select this option to delete the selected changelit.

/help/img/idea/2016.3/deleteChange.png Delete N/A This option is only available if single files are selected, not a changelist.
Check Out N/A This option is only available if a file under the Modified without Checkout node is selected. Use this option to check out the selected file from the repository.
Add to VCS N/A This option is only available if a file under the Unversioned Files node is selected. Use this option to add the selected files to your version control system.
Ignore N/A This option is only available if a file under the Unversioned Files node is selected. Use this option to ignore the selected file if you want to leave it unversioned.
Create Patch N/A Select this option to create a patch.
Shelve Changes N/A Select this option to shelve the selected changes.
Shelve in Perforce N/A This option is only available if you are using Perforce as a version control system.

Select this option to shelve your changes in Perforce. You will be asked to select which files you want to shelve and provide a description. After you've shelved your changes, the corresponding changelist will appear. You can unshelve it any time from the changelist's context menu.

/help/img/idea/2016.3/refresh.png Refresh Ctrl+F5 Select this option to refresh the status of files in your workspace.
Local History N/A Select this option and choose one of the following from the popup menu:
  • Show History: select this option to View local history of the selected file or folder.
  • Put Label: select this option to add a lable to the current version of the selected file or folder.
<Specific version control system> N/A Select this option to invoke a popup menu with options specific for the version control system you are using.

Preview Diff Pane

This pane opens when you click the Preview Diff button previewUsages  on the toolbar. In this pane you can examine the changes made to the selected file compared to its base revision.

The pane consists of two areas:

  • The affected code as it was in the base revision.
  • The affected code as it is after a change has been made.

To close the pane, click the Preview Diff button previewUsages once again.

ItemTooltip and ShortcutDescription
/help/img/idea/2016.3/arrowUp.png/help/img/idea/2016.3/arrowDown.pngPrevious 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.

/help/img/idea/2016.3/comparePreviousFile.png
/help/img/idea/2016.3/compareNextFile.png
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.
/help/img/idea/2016.3/edit.png 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
/help/img/idea/2016.3/diffViewer_type.png
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, for example, type text. 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.
  • Perform the Apply/Append/Revert actions.
Whitespace
/help/img/idea/2016.3/diffViewer_whitespaces.png
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
/help/img/idea/2016.3/diffViewer_highlight.png
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.
/help/img/idea/2016.3/collapseAll.png 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.
/help/img/idea/2016.3/sync_scrolling.pngSynchronize scrollingClick this button to simultaneously scroll both differences panes; if this button is released, each of the panes can be scrolled independently.
/help/img/idea/2016.3/cogwheel_blue.pngEditor settingsClick this button to reveal the drop-down list of available check commands. Select or clear these check commands to show or hide line numbers, indentation guides, white spaces, and soft wraps.

Note that same commands are duplicated in the context menu of the differences viewer gutter. Right-click the gutter to show the menu of check commands.

/help/img/idea/2016.3/external_tool.pngShow 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.

/help/img/idea/2016.3/help.pngHelp
F1
Click this button to show the corresponding help page.

The most useful shortcuts in the Diff Pane are the following:

ShortcutDescription
Ctrl+Shift+DUse this keyboard shortcut to show the popup menu of the most commonly user diff commands.
Ctrl+Tab Use this keyboard shortcut to switch between the left and the right panes.
Ctrl+Shift+Tab Use this keyboard shortcut to select the position obtained by Ctrl+Tab in the opposite pane.
Ctrl+Z/Ctrl+Shift+Z Use this keyboard shortcut to undo/redo a merge operation. Conflicts will be kept in sync with the text.

See Also

Last modified: 1 December 2016