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:
Favorites:
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
F3
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
Run
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
F7
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
F9
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
F12
Go back to previous tool window
Esc
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
F11
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
F5
Copy
F6
Move
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)
