Webstorm usage tips sharing

WebStorm is a JavaScript development tool owned by JetBrains. It has been praised by the majority of Chinese JS developers as "Web front-end development artifact", "the most powerful HTML5 editor", "the most intelligent JavaScript IDE", etc. It has the same origin as IntelliJ IDEA and inherits the functions of the powerful JS part of IntelliJ IDEA.

Setting tips:

How to change the theme (font & color matching):

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

How to prevent webstorm from opening the project file when it starts:
File -> Settings->General remove Reopen last project on startup.

How to display Chinese perfectly:
File -> Settings-> Check Override default fonts by (not recommended) in Appearance, set Name: NSimSun, Size: 12

How to display line numbers:
File -> Settings ->Editor, check "Show line numbers" to display line numbers

How to automatically wrap the code:
File -> settings -> Editor "Use Soft Wraps in editor" check , the code will automatically wrap into new lines

How to click the cursor to display it at the end of the line:
File -> Settings->Editor Just uncheck "Allow placement of caret after end of line".

How to modify the shortcut keys:
File -> Settings->Keymap, then double-click the function you want to modify the shortcut, a prompt box will appear, follow the prompts

Change to your own Familiar with the editor shortcut keys:
File ->Settings->Keymap, supports mainstream IDEs such as Visual Studio, Eclipse, and NetBeans.

javascript class library prompt.
File -> settings -> Javascript -> Libraries -> Then select the javascript class library you often use in the list, and finally Download and Install is ok.

Developing js I found that I need ctrl return to select the candidate option:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: "Smart" to "Always"

The js prompt is relatively slow
File -> Code Completion -> Autopopup in and change 1000 to 0

Git configuration:
File -> settings -> Editor -> github, go in Change the github account. If you don’t have git, you don’t need it.

Plug-in installation:
File ->plugins, then choose the powerful plug-ins and install them. ("css-X-fire" plug-in, Used when using firebug to modify css attributes, the css code in the editor will also change.)

Update later

Webstorm usage experience

Favorites function:
When the project directory is very large, some subdirectories are often opened, but the level is very deep. At this time, you can add the directory to your favorites. After the addition is successful, there will be a "Favorites" menu on the left

Breadcrumb Navigation:
In addition to the project page on the left, where you can select a directory, there is a directory similar to the website breadcrumb navigation under the top menu that can also achieve the same function. Clicking on each directory will bring up a drop-down menu to display the subdirectories under it, which is very practical.

Constructor interface:
Comments will appear if they match the format. If it is a js file, it is the functions and objects of the js class; if it is a css file, it is a summary of the css file; if it is an html file, it is the structure diagram of the node. These are just for the convenience of viewing the structure of the code.

Todo interface:
Add todo comments to the code and this interface will appear

Dual-column code interface:
Right Click the file on the code tab, then right-click -> spilt vertically (left and right screens) or spilt horizontally (upper and lower screens)

Local history function:
A good way to retrieve the code

WebStorm integrates git usage

Webstorm only integrates common git operations and cannot completely replace command line tools. You can check which git branch you are in in the lower right corner of the interface. You can also click on it to switch or create a new branch.

View the differences between the current code and the repository code:
Right-click any area of ​​the code interface, select git -> compare with and then select the repository to be compared.

webstorm shortcut key description

Editing editing related shortcut keys

Ctrl Space：
Basic code completion (the name of any class, method or variable) Basic code completion (any class, function or variable name), change to Alt S

Ctrl Shift Enter：
Complete statement Complete the current statement

Ctrl P：
Parameter info (within method call arguments) Parameter information includes method call parameters

Ctrl mouse over code
Brief Info Simple information

Ctrl F1
Show description of error or warning at caret Display the location of the cursor Error message or warning message

Alt Insert
Generate code... (Getters, Setters, Constructors) Create a new file or generate code,...Constructor function can create getter and setter methods for any field in the class

Ctrl O
Override methods Overload method

Ctrl I
Implement methods Implementation method

Ctrl Alt T
Surround with…(if, else, try, catch, for, etc) Use * to surround the selected line of code, (* includes if, while, try catch, etc.)

Ctrl /
Comment/uncomment with line comment Line comment/uncomment

Ctrl Shift /
Comment/uncomment with block comment Block comment/uncomment

Ctrl W
Select successively increasing code blocks Select code blocks, usually incremental selection

Ctrl Shift W
Decrease current selection to previous state Return to the previous shortcut key, decrement selection code

Alt Q
Context info Context information

Alt Enter
Show intention actions and quick-fixes Intention actions, quick results

Ctrl Alt L
Reformat code According to Template format formats code

Tab/ Shift Tab
Indent/unindent selected lines Indents/undoes indentation of selected lines

Ctrl X or Shift Delete
Cut current line or selected block to clipboard Cut the current line or selected block to the clipboard

Ctrl C or Ctrl Insert
Copy current line or selected block to chipboard Copy the current line or selected block Code block to clipboard

Ctrl V or Shift Insert
Paste from clipboard Paste the content on the clipboard

Ctrl Shift V
Paste from recent buffers Paste from the buffer The latest content

Ctrl D
Duplicate current line or selected block Copy the current line or selected block

Ctrl Y
Delete line at caret Delete the line at the cursor position

Ctrl Shift J
Smart line join (HTML and JavaScript only) Join smart line (HTML and JavaScript)

Ctrl Enter
Smart line split (HTML and JavaScript only) Split smart line (HTML and JavaScript)

Shift Enter
Start new line Start a new line

Ctrl Shift U
Toggle case for word at caret or selected block Case conversion at the cursor position

Ctrl Shift ]/[
Select till code block end/start Select till the code block ends/start

Ctrl Delete
Delete to word end Delete the text end

Ctrl Backspace
Delete to word start Delete text start

Ctrl NumPad /-
Expand/collapse code block Expand/collapse code block

Ctrl Shift NumPad
Expand all Expand all

Ctrl Shift NumPad-
Collapse Reduce all

Ctrl F4
Close active editor tab Close active editor tab

Search/replaceSearch/replace related shortcut keys

Ctrl F
Find Quickly search for codes in the current file

Ctrl Shift F
Find in path Find the path within the specified file

F3
Find next Find the next

Shift F3
Find previous Find the previous

Ctrl R
Replace Code replacement in the current file

Ctrl Shift R
Replace in path Batch replacement of codes in the specified file

Usage Search Search related shortcut keys

Alt F7/Ctrl F7
Find usages/Find usages in file Find usage/Find usage in file

Ctrl Shift F7
Highlight usages in file file

Ctrl Alt F7
Show usages Show usage

Running running

Alt Shift F10
Select configuration and run Select the architecture and run

Alt Shift F9
Select configuration and debug Select the architecture and patch the vulnerability

Shift F10
Run Run

Shift F9
Debug Fix the vulnerability

Ctrl Shift F10
Run context configuration from editor Run context configuration from editor

Ctrl Shift X
Run command line Run command line

Debugging Debugging related shortcut keys

F8
Step over does not enter the function

F7
Step into single-step execution

Shift F7
Smart step into Intelligent single step execution

Shift F8
Step out Jump out

Alt F9
Run to cursor Run to the cursor

Alt F8
Evaluate expression Evaluate expression

F9
Resume program Restart the program

Ctrl F8
Toggle breakpoint Switch breakpoint

Ctrl Shift F8
View breakpoints View breakpoints

Navigation Positioning-related shortcut keys

Ctrl N
Go to class jump to the specified class

Ctrl Shift N
Go to file through the file Quickly search files in the project by name

Ctrl Alt Shift N
Go to symbol Search function location by one character

Alt Right/ left
Go to next/ previous editor tab Enter Next/Previous editor options

F12
Go back to previous tool window Enter the previous tool window

Esc
Go to editor（from tool window） From tool window Enter the editor

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 Jump to the line

Ctrl E
Recent files popup Pop up the recently opened file

Ctrl Alt Left/Right
Navigate back/forward Navigate forward/back

Ctrl Shift Backspace
Navigate to last edit location Navigate to the last edit location

Alt F1
Select current file or symbol in any view Find the currently selected code or file in other interface modules Location

Ctrl B or Ctrl Click
Go to declaration Jump to the definition

Ctrl Alt B
Go to implementation(s) Jump to the method implementation

Ctrl Shift B
Go to type declaration Jump to method definition

Ctrl Shift I
Open quick definition lookup Open quick definition lookup

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

Alt Up/Down
Go to previous/next method Quickly move between methods

Ctrl ]/[
Move to code block end/start Jump to the end/start of the coding block

Ctrl F12
File structure popup File structure popup

Ctrl H
Type hierarchy Type hierarchy

Ctrl Alt H
Call hierarchy Call hierarchy

F2/ Shift F2
Next/previous highlighted error Jump to the next/previous error, highlight errors or warnings for quick location , use this shortcut key to quickly jump between error statements.

F4/Ctrl Enter
Edit source/ View source Edit source code/View source code

Alt Home
Show navigation bar Show navigation bar

F11
Toggle bookmark Switch mark

Ctrl F11
Toggle bookmark with mnemonic Use memory to switch mark

Ctrl #[0-9]
Go to numbered bookmark Jump to numbered bookmark Mark

Shift F11
Show bookmark Show bookmark

Refactoring Refactoring related shortcut keys

F5
Copy Copy

F6
Move Move

Alt Delete
Safe Delete Safe Delete

Shift F6
Rename Rename

Ctrl Alt N
Inline Variable Embed variable

Ctrl Alt M
Extract Method(Javascript only) Extract function

Ctrl Alt V
Introduce Variable Introduce variable

Ctrl Alt F
Introduce Field Introduce field

Ctrl Alt C
Introduce Constant Introduce constants

VCS/Local History version control system/local history related shortcut keys

Alt BackQuote()
'VCS 'quick popup Quick popup VCS

Ctrl K
Commit project to VCS Submit project to VCS

Ctrl T
Update project from VCS Update project from VCS

Alt Shift C
View recent changes View the latest changes

General Commonly used related shortcut keys

Ctrl Shift A
Find action Find and call the editor's function

Alt #[0-9]
Open corresponding tool window Quickly switch to open the interface module

Ctrl Alt F11
Toggle full screen mode Switch to full screen mode

Ctrl Shift F12
Toggle maximizing editor Switch maximizing editor

Alt Shift F
Add to Favorites Add the current file to Favorites

Alt Shift I
Inspect current file with current profile Use Current properties check the current file

Ctrl BackQuote( )
Quick switch current scheme Quickly switch the existing combination

Ctrl Alt S
Open setting dialog Open the setting dialog box

Ctrl Tab
Switch between tabs and tool window Switch between tabs and tool window (conflicts with windows shortcut keys)

Related recommendations: webstorm usage tutorial

The above is the detailed content of Webstorm usage tips sharing. For more information, please follow other related articles on the PHP Chinese website!