Compare files, folders, and text sources

• In the Project tool window, select the files you want to compare and choose Compare Files, or press Ctrl+D.

• Alternatively, select one file, choose Compare With from its context menu, and select a file that is outside your project.

• Right-click anywhere in the editor and choose Compare with Clipboard from the context menu.

1. In the Project tool window, right-click the file you want to compare with the currently opened file.

2. Choose Compare File with Editor from the context menu.

If you often need to compare files that are outside your project with the active editor, or don't want to have the Project tool window open, you can use the Compare File with Editor action that lets you choose any file and compare it with the active editor.

To add this action to the editor tab's context menu:

1. Press Ctrl+Alt+S to open settings and then select Appearance & Behavior | Menus and Toolbars.

2. In the right pane, expand the Editor Tab Popup Menu node, select where you want to add the new action, click and select Add Action.

3. Find and add the Compare File with Editor action under Version Control Systems | Diff & Merge.

1. Open the Commit tool window Alt+0.

2. Locate the required file in a changelist and do one of the following:

   • Right-click the file and select Git | Show Diff.

   • Select the file and press Ctrl+D.

   • Double-click the file.

1. Select the folders you want to compare in the Project tool window.

2. From the context menu, choose Compare Directories, or press Ctrl+D.

3. Use the following toolbar buttons to filter the list:

   • : click to display files that are present in the left folder, but are missing from the right one.

   • : click to display files that are present in the right folder, but are missing from the left one.

   • : click to display files that are present in both folders, but whose contents, timestamp or size are different.

   • : click to display files that are present in both folders and that are identical with regard to the option selected in the Compare by dropdown.

4. Use the text filter in the search field to include or exclude files from the list:

   • To include files, input a matching pattern. For example, .txt validates all paths that end with .txt.

   • To exclude files, add ! before your pattern. For example, !build/* excludes all files that are located within the build directory.

   • Use & (AND) and | (OR) to combine several filters. For example, *.txt|.xml&!build/* validates all paths that end with .txt or .xml and are not located within the build directory.

WebStorm lets you sync the contents of two folders, or apply changes from one folder to another.

1. For each file, click the icon in the * column until you've set an action to be taken on that file.

   • : copy the selected item from the left to the right folder. If such file already exists in the right folder, it will be overwritten.

   • : copy the selected item from the right to the left folder. If such file already exists in the left folder, it will be overwritten.

   • : no action will be performed (the two files are identical).

   • : no action will be performed (the two files are different).

   • : remove the selected item.

2. Do one of the following:

   • To apply the selected action to the current item, click the Synchronize Selected button on the toolbar or press Enter.

   • To apply the selected actions to all items, click the Synchronize All button on the toolbar.

Sometimes a file may be present in one folder, and another file with a similar name in the other folder (for example, VCS_library_1.4 and VCS_library_1.5). These may be versions of the same file that you want to compare. Also, there may be a situation when you think a file was renamed, but is otherwise identical to a file in another folder. WebStorm lets you compare two files, one of which is present in the right folder, and another one in the left even though such files are treated as different entities.

1. Select the files you want to compare in the left and the right pane.

2. Click the Compare New Files with Each Other icon on the toolbar. The differences between the selected files will be displayed in the bottom pane.