Tips and Tricks using WebStorm

About WebStorm setting up config and practical usage

Posted by Enovace on February 29, 2024

Configuration Tips

How to change the theme (fonts&colors).

File -> settings -> Editor -> colors&fonts -> scheme name.Theme download address

How to make WebStorm start without opening the project file:

File -> Settings-> General remove Reopen last project on startup.

How to display Other language perfectly:

File -> Settings->Appearance check Override default fonts by (not recommended), set Name:NSimSun, Size:12.

How to display line number:

File -> Settings->Editor, check “Show line numbers”, then line numbers will be shown.

How to change the line number of code automatically:

File -> settings -> Editor “Use Soft Wraps in editor” put a check mark on it, then the code will change lines automatically.

How to click cursor to show at the end of the line:

File -> Settings->Editor “Allow placement of caret after end of line” Remove the hook.

How to modify the fast key:

File -> Settings->Keymap, then double-click the function you want to modify, there will be a prompt box, follow the prompts to operate!

Change the keymap to the one you are familiar with:

File -> Settings->Keymap, support Visual Studio, Eclipse, NetBeans and other major IDE.

javascript library tips.

File -> settings -> Javascript -> Libraries -> then select the javascript library you often use in the list, and finally Download and Install then you’re done.

When I was developing js, I found that I needed ctrl + return to select a candidate:

File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: “Smart” to “Always “

The js prompt is slow

File -> Code Completion -> Autopopup in under 1000 to 0

git configuration:

File -> settings -> Editor -> github, go in and change your github account, if you don’t have git you don’t need to.

Plugin installation:

File ->plugins, then select the plugins you want to install. (“css-X-fire” plugin, used when using firebug to modify css properties, the css code in the editor will also change.)

Useful Functions:


When the project directory is very large, some subdirectories are very often open, but the hierarchy is very deep, this time you can add the directory to the favorites inside, after adding successfully, there is a “Favorites” menu on the left side.

Breadcrumb navigation:

In addition to the left side of the project page, you can select the directory, in the top menu there is a similar website breadcrumb navigation like the directory can also achieve the same function. Clicking on each directory will give you a drop-down menu showing the subdirectories under it, which is very useful.

Constructor interface:

Comments will appear if they match the format. If it’s a js file, it’s the functions and objects of the js class; if it’s a css file, it’s a summary of the css file; if it’s an html file, it’s the structure of the node. That said, these are just to make it easier to see the structure of the code.

Todo interface:

Adding todo comments to the code will bring up this interface.

Two-column code interface:

Right-click on the file on the Code tab, then right-click -> spilt vertically (left and right) or spilt horizontally (top and bottom)

Local history function.

A good way to retrieve code

Using git

WebStorm only integrates git for common operations, and is not a complete replacement for command line tools. In the bottom right corner of the interface you can see which git branch you are in. You can also switch or create a new branch by clicking on it.

To see the differences between your current code and the repository code.

Right-click anywhere in the code interface and select git -> compare with and select the repository you want to compare with.

WebStorm shortcuts:

Editing-related shortcuts

Ctrl + Space:

Basic code completion (the name of any class, method or variable), change to Alt + S

Ctrl + Shift + Enter:

Complete statement: Completes the current statement.

Ctrl + P:

Parameter info (within method call arguments) Parameter info (within method call arguments)

Ctrl + mouse over code

Brief Info

Ctrl + F1

Show description of error or warning at caret Show description of error or warning at cursor position

Alt + Insert

Generate code… (Getters, Setters, Constructors) Creates a new file or generates code, … constructors, can create getter and setter methods for any field inside a class.

Ctrl + O

Override methods

Ctrl + I

Implement methods

Ctrl + Alt + T

Surround with… (if, else, try, catch, for, etc) Surround selected lines of code with * (* including if, while, try catch, etc)

Ctrl + /

Comment/uncomment with line comment line comment/uncomment with line comment

Ctrl + Shift + /

Comment/uncomment with block comment block comment/uncomment block comment

Ctrl + W

Select successively increasing code blocks.

Ctrl + Shift + W

Decrease current selection to previous state Back to previous shortcut, decrease code selection

Alt + Q

Context info

Alt + Enter

Show intent actions and quick-fixes

Ctrl + Alt + L

Reformat code Format code according to template formatting

Tab/ Shift + Tab

Indent/unindent selected lines Indent/undo indent selected lines

Ctrl + X or Shift + Delete

Cut current line or selected block to clipboard

Ctrl + C or Ctrl + Insert

Copy current line or selected block to chipboard Ctrl + V or Shift + Delete Cut current line or selected block to clipboard

Ctrl + V or Shift + Insert

Paste from clipboard Paste from clipboard

Ctrl + Shift + V

Paste from recent buffers Ctrl + V or Shift + Insert Paste from clipboard

Ctrl + D

Duplicate current line or selected block

Ctrl + Y

Delete line at caret Delete line at cursor position

Ctrl + Shift + J

Smart line join (HTML and JavaScript only)

Ctrl + Enter

Smart line split (HTML and JavaScript only) Ctrl + Shift + J

Shift + Enter

Start new line

Ctrl + Shift + U

Toggle case for word at caret or selected block Cursor position case conversion

Ctrl + Shift + ]/[

Select till code block end/start Select till code block end/start

Ctrl + Delete

Delete to word end

Ctrl + Backspace

Delete to word start Delete to word start

Ctrl + NumPad+/-

Expand/collapse code block Expand/collapse code block

Ctrl + Shift+ NumPad+

Expand all

Ctrl + Shift+ NumPad-

Collapse all

Ctrl + F4

Close active editor tab Close active editor tab Search/replace Search/replace related shortcuts

Ctrl + F

Find Quickly find code within the current file

Ctrl + Shift + F

Find in path Find in path within a specified file


Find next

Shift + F3

Find previous

Ctrl + R

Replace Code Replacement in the current file

Ctrl + Shift + R

Replace in path - Batch Replace in specified file Usage Search - Search Related Shortcuts

Alt + F7/Ctrl + F7

Find usages/Find usages in file

Ctrl + Shift + F7

Highlight usages in file

Ctrl + Alt + F7

Show usages Running

Alt + Shift + F10

Select configuration and run

Alt + Shift + F9

Select configuration and debug Select configuration and debug

Shift + F10


Shift + F9

Debug Patch bugs

Ctrl + Shift + F10

Run context configuration from editor

Ctrl + Shift + X

Run command line Run command line Debugging Debugging-related shortcuts

F8 Step over without entering a function


Step into single-step execution

Shift + F7 Smart step into

Shift + F8

Step out Jump out

Alt + F9

Run to cursor

Alt+ F8

Evaluate expression


Resume program

Ctrl + F8

Toggle breakpoint

Ctrl + Shift + F8

View breakpoints Navigation Positioning related shortcuts

Ctrl + N

Go to class

Ctrl + Shift + N

Go to file Quickly locate a file in the project by its name.

Ctrl + Alt + Shift + N

Go to symbol Find function location by a character

Alt + Right/ left

Go to next/ previous editor tab Go to next/ previous editor options


Go back to previous tool window


Go to editor (from tool window) Go to editor from tool window

Shift + Esc

Hide active or last active window Hide active window

Ctrl + Shift + F4

Close active run/message/find/…tab Close active …. Tab

Ctrl + G

Go to line

Ctrl + E

Recent files popup pops up recently opened files.

Ctrl + Alt + Left/Right

Navigate back/forward

Ctrl + Shift + Backspace

Navigate to last edit location

Alt + F1

Select current file or symbol in any view Find the location of the currently selected code or file in any other view module.

Ctrl + B or Ctrl + Click

Go to declaration

Ctrl + Alt + B

Go to implementation(s) Ctrl + Shift + B

Ctrl + Shift + B

Go to type declaration

Ctrl + Shift + I

Open quick definition lookup

Ctrl + Shift + I

Go to super-method/super-class Jump to method/super-class

Alt + Up/Down

Go to previous/next method Go to previous/next method Quickly move between methods

Ctrl + ]/[

Move to code block end/start

Ctrl + F12

File structure popup

Ctrl + H

Type hierarchy

Ctrl + Alt + H

Call hierarchy

F2/ Shift + F2

Next/previous highlighted error Jump to the next/previous error, highlight errors or warnings to quickly locate them, use this shortcut to quickly jump between statements in error.

F4/Ctrl + Enter

Edit source/ View source Edit source/ View source

Alt + Home

Show navigation bar


Toggle bookmark

Ctrl + F11

Toggle bookmark with mnemonic

Ctrl + #[0-9]

Go to numbered bookmark Toggle bookmark with mnemonic

Shift + F11

Show bookmark Show bookmark Refactoring Refactoring-related shortcuts





Alt + Delete

Safe Delete

Shift + F6

Rename Rename

Ctrl + Alt + N

Inline Variable

Ctrl + Alt + M

Extract Method( Javascript only)

Ctrl + Alt + V

Introduce Variable

Ctrl + Alt + F

Introduce Field

Ctrl + Alt + C

Introduce Constant VCS/Local History Version Control System/Local History Related Shortcuts

Alt + BackQuote( )

‘VCS’ quick popup Quick popup VCS

Ctrl + K

Commit project to VCS Commit project to VCS

Ctrl + T

Update project from VCS

Alt + Shift + C

View recent changes General Commonly used related shortcuts

Ctrl + Shift +A

Find action Finds and invokes editor functions.

Alt + #[0-9]

Open corresponding tool window Quickly toggle open interface module

Ctrl + Alt + F11

Toggle full screen mode Ctrl + Alt + F11

Ctrl + Shift + F12

Toggle maximizing editor Toggle maximizing editor

Alt + Shift + F

Add to Favorites Add the current file to favorites.

Alt + Shift + I

Inspect current file with current profile Inspect current file with current profile

Ctrl + BackQuote( )

Quick switch current scheme

Ctrl + Alt + S

Open setting dialog Open setting dialog

Ctrl + Tab

Switch between tabs and tool window (conflicts with windows shortcuts)