Some related techniques for using WebStorm-webstorm-php.cn

This article brings you some related skills about using WebStorm. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are more complete shortcut keys below, and you will gradually become familiar with it...

WebStorm mashup svn

WebStorm mashup nodeJS

Use less and uglify -js as an example

How to use npm to download modules in root

A brief introduction to webstorm

Official website address: http://www.jetbrains.com/webstorm /features/index.html

If you want to do your job well, you must first sharpen your tools, as the title states. I saw an article on the Internet introducing webstrom, and I felt that the function is really powerful. I also know why the files uploaded to github by Alibaba's front-end have an .idea file. (It is said that Taobao internally recommends using webstrom when writing js)

We can understand that IDE integrates many functions you want, or functions you don't want. In other words, it is an editor with many plug-ins installed, so so far, I don’t think it is necessary to install any plug-ins for it.

Then let’s introduce the special features of webstrom:

WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具

##WebStorm is a commercial JavaScript development tool launched by JetBrains

Any editor needs to save (ctrl s). This is a characteristic of all editing software on the win platform, but there is no familiar * in the upper right corner of the webstorm editing file.
Benefits: After eliminating the need for ctrl s, when combined with Firefox's vim, you can basically see the results page without moving the mouse.
Disadvantages: There is no previous * mark, and it will be stored immediately in case of keyboard misoperation.
Any editor has no history record as long as the file is closed, but webstorm does. vcs->Local History -> Show History (shortcut key: ALT ~ ->7)
Benefits: As long as webstorm is not closed, your file can be returned to the previous operation at any time (this is why ctrl in webstorm y is the reason for deleting a row).
Disadvantages: These historical records will be gone after webstorm is closed and restarted; another disadvantage is that the resulting memory consumption will inevitably be relatively large.
Any editor, except server svn, does not have a local version, but webstorm provides a local file modification history (shortcut key: ALT SHIFT c, ALT+Option+c on Mac). You can also use Ctrl E to pop out recently opened files.
Benefits: Equivalent to local svn.
Disadvantages: Memory consumption must also be relatively large.
Integrated zencoding, HTML5, ftp, instant editing (chrome), auto-complete, Mozilla-based JavaScript debugger, JSLint, Less support, CoffeeScript support, Node.js, unit testing , Integrate features such as Git and svn version control.
When writing CSS, it will intelligently prompt the paths of various files and images, so you don’t have to confirm whether the file exists.

Other features have been introduced. If you want to know more, you can go to the webstrom official website to continue searching. After reading this introduction and so many powerful features, do you have the urge to try this legendary front-end artifact right away? Um.

First download webstrom on the official download page, click Install, and then keep going to the next step. Finally, an interface that requires a registration code will appear, because webstrom is a commercial IDE, and of course China’s diaosi front-end does not have that much money to buy. It’s an expensive artifact, don’t worry, we can use WebStorm’s key to learn to use this front-end artifact. Hehe~~~~

After the installation is successful, you will definitely feel a little uncomfortable. Just like me, I think this color scheme is really exciting. There are also some settings that I don't want either. So below I will list the settings I am used to.

Webstorm 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->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" to display the line numbers
How to automatically wrap code:
File -> settings -> Editor "Use Soft Wraps in editor" Check the hook, and the code will automatically wrap.
How to click the cursor to display At the end of this line:
File -> Settings->Editor "Allow placement of caret after end of line" just uncheck it.
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
Replace with the shortcut keys you are familiar with the editor:
File ->Settings->Keymap, which 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.
When developing js, I found that ctrl return is required to select the candidate option:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: "Smart" to "Always"
js prompt is relatively slow
File -> Code Completion -> Autopopup in and change 1000 to 0
git configuration:
File -> settings -> Editor -> github, go in and change the github account. If you don’t have git, you don’t need it.
Plug-in installation:
File - >plugins, then select the powerful plug-ins and install them. (The "css-X-fire" plug-in is used when using firebug to modify css properties, 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
Bread Crumb 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 split horizontally (upper and lower screens)
Local history function:
A good way to retrieve code

WebStorm integrates git usage

Webstorm only integrates common git operations, and it is not completely Alternative command line tool. 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 Show the error or warning at the cursor position
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 Override 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
Ctrl Shift /
Comment/uncomment with block comment block comment/uncomment block
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 Format the code according to the template format
Tab/ Shift Tab
Indent/unindent selected lines Indent/Unindent 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 code block to 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 code 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 end/start of the code block
Ctrl Delete
Delete to word end Delete 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 Collapse all
Ctrl F4
Close active editor tab Close active editor tab

Search/replaceSearch/replace related shortcut keys

Ctrl F
Find Quickly find the code in the current file
Ctrl Shift F
Find in path Find the path in the specified file
F3
Find next Find the next one
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 specified files

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
Ctrl Alt F7
Show usages Show usages

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 from editor Content structure
Ctrl Shift X
Run command line Run command line

##Debugging Debugging related shortcut keys

Step over does not enter the function
Step into single-step execution
Smart step into Smart step into
Step out
Run to cursor Run to the cursor
Evaluate expression Evaluate expression
Resume program Restart Program
Toggle breakpoint Switch breakpoint
View breakpoints View breakpoint

Navigation Positioning-related shortcut keys

Go to class jump to the specified class
Go to file Quickly search for files in the project by file name
Go to symbol Search by one character Function location
Go to next/ previous editor tab Go to next/previous editor tab
Go back to previous tool window Enter the previous tool window
Go to editor（from tool window） Enter the editor from the tool window
Hide active or last active window Hide the active window
Close active run/message/find/…tab Close the activity ….Tag
Go to line Jump to the first line
Recent files popup Recently opened files
Navigate back/forward Navigate forward/back
Navigate to last edit location Navigate to the last edit location
Select current file or symbol in any view Find the location of the currently selected code or file in other interface modules
Go to declaration jump to the definition
Go to implementation(s) Jump method implementation
Go to type declaration Jump method definition
Ctrl Shift I
Open quick definition lookup Open quick definition lookup
Ctrl U
Go to super-method/super-class Jump Go to method/super class
Alt Up/Down
Go to previous/next method Quickly move position 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 the error or warning to quickly locate it, 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 Display navigation bar
F11
Toggle bookmark switch mark
Ctrl F11
Toggle bookmark with mnemonic Use memory switch mark
Ctrl #[0-9]
Go to numbered bookmark Jump to the numbered bookmark
Shift F11
Show bookmark Show mark

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
Extract Method(Javascript only) Extract function
Introduce Variable Introduce variable
Introduce Field Introduce field
Introduce Constant Introducing constants

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

'VCS'quick popup Quickly pop up VCS
Commit project to VCS Submit project to VCS
Update project from VCS Update project from VCS

##Alt Shift C

Alt #[0-9]
Ctrl Alt F11
Ctrl Shift F12
Alt Shift F
Alt Shift I
Ctrl BackQuote( )
Ctrl Alt S
Ctrl Tab

The above is the detailed content of Some related techniques for using WebStorm. For more information, please follow other related articles on the PHP Chinese website!