Get Started With WebStorm

Find and apply custom themes

To use a custom theme, go to Settings (${ShowSettings}) | Plugins, open the Marketplace tab, find the plugin with the desired theme,and click Install, then Apply.

Then press ${QuickChangeScheme} to open the Switch popup, then Theme and select the desired theme from the list.

Switch to Compact Mode

To decrease the size of icons and toolbars, press Shift twice, type Compact Mode in the Search Everywhere popup, and press Enter to change the mode.

Customize your IDE with plugins

To adjust the IDE to your needs, check out the list of best plugins for WebStorm .

Use custom fonts in the editor

To use a custom font, configure its size and ligatures, go to Settings (${ShowSettings}) | Editor | Font.

Find Anything

To search for text strings across the entire project, press Shift twice and start typing the item name in the Search Everywhere popup.

Search and replace across files

To search across the entire project, press ${FindInPath}. To replace, press ${ReplaceInPath}.

Go to declaration

To jump to the declaration of the symbol at the caret, press ⌘Click / Ctrl+Click or ${GotoDeclaration}.

Navigate among recently active tabs

To jump to the previous or next active editor tab, press ${Back} or ${Forward} respectively.

Show usages

To view the usages of a class, method, variable, press ${ShowUsages} or ⌘Click / Ctrl+Click on the declaration.

To find the usages of a file, right-click it in the Project tool window and select Find Usages from the context menu.

Rename, Move, Extract Component, and other refactorings

To invoke a refactoring, right-click the relevant item in the editor or in the Project tool window and select Refactor from the context menu.

Use multiple carets

To add an extra caret, press ${EditorAddOrRemoveCaret} at the desired location.
To remove an extra caret, press ${EditorAddOrRemoveCaret}.

Reformat code

Use ${ReformatCode} to reformat the code in a file.

Surround code with a tag

To wrap a selection in tags, press ${SurroundWith}.

Write console.log() fast

Type log and press ⇥(Tab) to insert console.log().

Select code fragments in the editor

To extend or shrink a selection, press ${EditorSelectWord} or ${EditorUnSelectWord}.

Comment and uncomment code

To comment or uncomment a line, press ${CommentByLineComment}. For a block comment, use ${CommentByBlockComment}.

Commit changes

Open the Commit tool window with ${ActivateCommitToolWindow} and use it to commit, push, and review changes in your files.
Double-click the file you want to see the diff for.

Update your project and work with branches

Click the branch name in the top left-hand corner and select Update Project. You can also work with branches from there.

Git History

To view the history of a file, right-click anywhere in it in the editor, and select Git | Show History from the context menu.

To view the project history, open the Log tab of the Git tool window in the bottom of the screen. The tab shows all local and remote branches as well as all changes committed to all branches or to a specific branch or repository.