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!