Some related techniques for using WebStorm

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 is a commercial JavaScript development tool launched by JetBrains

1. 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.
   

2. 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.
   

3. 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.
   

4. 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.

5. 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

F8
• Step over does not enter the function

  
  

F7
• Step into single-step execution

  
  

Shift F7
• Smart step into Smart step into

  
  

Shift F8
• Step 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 breakpoint

  
  

Navigation Positioning-related shortcut keys

Ctrl N
• Go to class jump to the specified class

  
  

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

  
  

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

  
  

Alt Right/ left
• Go to next/ previous editor tab Go to next/previous editor tab

  
  

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

  
  

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

  
  

Shift Esc
• Hide active or last active window Hide the active window

  
  

Ctrl Shift F4
• Close active run/message/find/…tab Close the activity ….Tag

  
  

Ctrl G
• Go to line Jump to the first line

  
  

Ctrl E
• Recent files popup Recently opened files

  
  

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

##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 Quickly pop up 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 recent changes

• 
  

General Commonly used related shortcut keys

Ctrl Shift A
Find action Find and call Editor functions

• 
  

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

• 
  

  Ctrl Alt F11
Toggle full screen mode Switch 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 the current profile to 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)

• 
  

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!