Webstorm installation and brief introduction

This article mainly introduces webstorm download, installation, shortcut keys, and simple usage skills. Interested friends can refer to it.

WebStorm download address:

Link: http://www.php.cn/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

Ctrl V or Shift Insert

Paste from clipboard Paste the contents of the clipboard

Ctrl Shift V

Paste from recent buffers Paste the latest content in the buffer

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) Separate smart lines (HTML and JavaScript)

Shift Enter

Start new line Start 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 end/start of the code block

Ctrl Delete

Delete to word end Delete End of text

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 Expand all

Ctrl Shift NumPad-

Collapse Reduce all

Ctrl F4

Close active editor tab Close active editor tab

Search/replace search/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 one

Shift F3

Find previous Find the previous one

Ctrl R

Replace Replace the code in the current file

Ctrl Shift R

Replace in path Specify batch replacement of codes in the file

Usage Search Search related shortcut keys

Alt F7/Ctrl F7

Find usages/Find usages in file found Use/Find in file using

Ctrl Shift F7

Highlight usages in file file

Ctrl Alt F7

Show usages Show usages

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 content framework 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 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!