This article mainly introduces webstorm download, installation, shortcut keys, and simple usage skills. Interested friends can refer to it.
WebStorm download address:
Link: //m.sbmmt.com/xiazai/gongju/506
Installation steps
1. Open the dmg image and drag "WebStorm.app" into the application;
2. Open WebStorm to Activate the page and then exit WebStorm. This step is very important. There are no clear instructions on the Internet, which leads to an error when opening WebStorm after completing the following steps.
3. Copy "JetbrainsCrack.jar" to the application-right-click "WebStorm.app" to display the package content-Contents-bin;
4. Open the application with a text editor-right-click "WebStorm.app" Display the package content-Contents-bin-webstorm.vmoptions, add "-javaagent:JetbrainsCrack.jar" in the last line;
5. Open "WebStorm.app", select "Activation code", open "SN.txt", Fill in the registration box with the serial number in "'{}". This sn file is in the dmg you downloaded;
webstorm setting tips
How to change the theme (font & color):
File -> settings -> Editor -> colors&fonts -> scheme name.Theme download address
How to start webstorm Do not open the project file:
File -> Settings->General remove Reopen last project on startup.
How to display Chinese perfectly:
File -> Settings->Appearance check Override default fonts by (not recommended), set Name: NSimSun, Size: 12
How to display line numbers:
File -> Settings->Editor, check "Show line numbers" The line number is displayed
How to automatically wrap the code:
File -> settings -> Editor "Use Soft Wraps in editor" Check the hook, and the code will automatically wrap.
How to click The cursor is displayed 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.)
webstorm usage experience
Collection Folder 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
Double-column code interface:
Right-click the file on the code tab, and then right-> spilt vertically (left and right screens) or spilt horizontally (upper and lower screens)
Local history function:
A good way to retrieve the code
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 (the name of any class, function or variable), 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 Show the error message or warning message at the cursor position
Alt Insert
Generate code…（Getters, Setters , Constructors) create a new file or generate code,...Constructor, you can create getter and setter methods for any field in the class
Ctrl O
Override methods Overloaded methods
Ctrl I
Implement methods Implementation methods
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 line comment
Ctrl Shift /
Comment/uncomment with block comment block comment/uncomment block Note
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 Retreat, reduce the 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 Format code according to template format
Tab/ Shift Tab
Indent/unindent selected lines Indent/unindent selected lines
Ctrl block to chipboard Copy the current line or selected code block to the clipboard
Paste from clipboard Paste the contents of the clipboard
Paste from recent buffers Paste the latest content in the buffer
Duplicate current line or selected block Copy the current line or selected block
Delete line at caret Delete the line at the cursor position
Smart line join（HTML and JavaScript only）Join smart line（HTML and JavaScript）
Smart line split（HTML and JavaScript only) Separate smart lines (HTML and JavaScript)
Start new line Start new line
Toggle case for word at caret or selected block Case conversion at the cursor position
Select till code block end/start Select till the end/start of the code block
Delete to word end Delete End of text
Delete to word start Delete to word start
Expand/collapse code block Expand/collapse code block
Expand all Expand all
Collapse Reduce all
Close active editor tab Close active editor tab
Ctrl F
Find in path Find the path within the specified file
Find next Find the next one
Find previous Find the previous one
Replace Replace the code in the current file
Replace in path Specify batch replacement of codes in the file
Alt F7/Ctrl F7
Highlight usages in file file
Show usages Show usages
Alt Shift F10
Select configuration and debug Select the architecture and patch the vulnerability
Run run
Debug fix the vulnerability
Run context configuration from editor run content framework from editor
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 program
Ctrl F8
Toggle breakpoint Switch breakpoint
Ctrl Shift F8
View breakpoints View breakpoints Click
Navigation to locate the related shortcut keys
Ctrl N
Go to class jump to the specified class
Ctrl Shift N
go to file Quickly pass the file name Find files in the project
Ctrl Alt Shift N
Go to symbol Find the function location by one character
Alt Right/ left
Go to next/ previous editor tab Go to the next / Previous editor option
F12
Go back to previous tool window Enter the previous tool window
Esc
Go to editor（from tool window） Enter editing from the 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 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 location of the currently selected code or file in other interface modules
Ctrl B or Ctrl Click
Go to declaration jump to the definition
Ctrl Alt B
Go to implementation (s) Jump method implementation
Ctrl Shift B
Go to type declaration Jump method definition
Ctrl Shift I
Open quick definition lookup Open definition quick search
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, highlights errors or warnings and quickly locates them. Use this shortcut key to quickly jump between erroneous 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 Introducing 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:
How to use babel in WebStorm ES6
How to use babel in Webstorm to convert ES6 to ES5
Commonly used WebStorm shortcuts key
The above is the detailed content of Webstorm installation and brief introduction. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
