Get Started With WebStorm

Find and apply custom themes

Go to Settings (${ShowSettings}) | Plugins, open the Marketplace tab, find the plugin with the desired theme, click Install, then Apply.

Press ${QuickChangeScheme} to open the Switcher popup, then Theme and select the desired theme from the list.

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.

Plugins to customize your IDE

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.

Search Everywhere

To find any file, folder, class, or action by its name, 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 ⌘Сlick / 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 ⌘Сlick / 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.

Reformat code

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

Surround code with a tag

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

Use multiple carets

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

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.