webstorm usage skills

webstorm setup tips

• How to change the theme (font & color):
  File -> settings -> Editor -> colors&fonts -> scheme name. Theme download address

• How to make webstorm not open the project file when it starts:
  File -> Settings->General to remove Reopen last project on startup.

• How to display Chinese perfectly:
  Check Override default fonts by (not recommended) in File -> Settings->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 box, the code will automatically wrap

• How to click the cursor and display it at the end of the line:
  File -> Settings->Editor "Allow placement of caret after end of line" just remove the check.

• How to modify the shortcut keys:
  File -> Settings->Keymap, then double-click the function to be modified, a prompt box will appear, follow the prompts

• Change to the shortcut keys you are familiar with in the editor:
  File ->Settings->Keymap, which supports mainstream IDEs such as Visual Studio, Eclipse, and NetBeans.

• javascript class library hints. 
  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 options: 
  File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: "Smart" is changed to "Always"

• js prompt is relatively slow
  File -> Code Completion -> Autopopup in, 1000 is changed 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, and then select the powerful plugins to install. (The "css-X-fire" plugin is used to modify the css properties with firebug, and the css code in the editor will also change.)

• update later

Experience of using webstorm

• Favorites function:
  When the project directory is very large, some subdirectories are frequently opened, but the level is very deep. At this time, you can add the directory to the favorites. After the addition is successful, there is 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 to achieve the same function. Clicking on each directory will have a drop-down menu to display the subdirectories under it, which is very useful.

• Constructor interface:
  Appears if the comment matches 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 the summary of the css file; if it is an html file, it is the structure diagram of the node. In other words, these are for the convenience of viewing the structure of the code.

• todo interface:
  this interface will appear when you add todo comments to the code

• Two-column code interface:
  right-click the file on the code tab, then right-click -> spilt vertically (two screens left and right) or spilt horizontally (two screens up and down)

• Local History Feature:
  A Great Way to Get Your Code Back

WebStorm integrates git using

Only the common operations of git are integrated in webstorm, and it cannot completely replace command-line tools. In the lower right corner of the interface, you can check which git branch you are in. You can also click to switch or create a new branch on it.

Check the difference between the current code and the repository code:
right-click any area of ​​the code interface, select git -> compare with and select the repository to compare.

webstorm shortcut key description

Editing editing related shortcuts

• 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 completes the current statement

• Ctrl + P:
  Parameter info (within method call arguments) Parameter information includes method call arguments

• Ctrl + mouse over code
  Brief Info

• Ctrl + F1
  Show description of error or warning at caret Displays the error information or warning information at the cursor position

• Alt + Insert
  Generate code... (Getters, Setters, Constructors) to 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

• Ctrl + I
  Implement methods

• Ctrl + Alt + T
  Surround with...(if, else, try, catch, for, etc) Surround selected lines of code with *, (* includes if, while, try catch, etc.)

• Ctrl + /
  Comment/uncomment with line comment Line comment/uncomment line

• Ctrl + Shift + /
  Comment/uncomment with block comment

• Ctrl + W
  Select successively increasing code blocks Select code blocks, usually incrementally

• Ctrl + Shift + W
  Decrease current selection to previous state Return of the last shortcut key, decrement selection code

• Alt + Q
  Context info Context info

• Alt + Enter
  Show intention actions and quick-fixes

• Ctrl + Alt + L
  Reformat code Format code according to 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 current line or selected block to clipboard

• Ctrl + C or Ctrl + Insert
  Copy current line or selected block to chipboard

• Ctrl + V or Shift + Insert
  Paste from clipboard Paste the contents of the clipboard

• Ctrl + Shift + V
  Paste from recent buffers

• Ctrl + D
  Duplicate current line or selected block Duplicate current line or selected block of code

• Ctrl + Y
  Delete line at caret Delete the line at the cursor position

• Ctrl + Shift + J
  Smart line join (HTML and JavaScript only)

• Ctrl + Enter
  Smart line split (HTML and JavaScript only) to separate smart lines (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 of cursor position

• Ctrl + Shift + ]/[
  Select till code block end/start

• Ctrl + Delete
  Delete to word end Delete the end of the word

• Ctrl + Backspace
  Delete to word start Delete word start

• Ctrl + NumPad+/-
  Expand/collapse code block Expand/collapse code block

• Ctrl + Shift+ NumPad+
  Expand all

• Ctrl + Shift + NumPad-
  Collapse Collapse all

• Ctrl + F4
  Close active editor tab Close active editor tab

Search/replace search/replace related shortcuts

• Ctrl + F 
  Find Quickly find code in the current file

• Ctrl + Shift + F 
  Find in path Find the path in the specified file

• F3 
  Find next to find the next

• Shift + F3 
  Find previous Find previous

• Ctrl + R 
  Replace code replacement in the current file

• Ctrl + Shift + R 
  Replace in path Specify batch code replacement in the file

Usage Search search related shortcuts

• Alt + F7/Ctrl + F7 
  Find usages/Find usages in file

• Ctrl + Shift + F7 
  Highlight usages in file

• Ctrl + Alt + F7 
  Show usages

Running

• Alt + Shift + F10 
  Select configuration and run

• Alt + Shift + F9 
  Select configuration and debug Select architecture, patch bugs

• Shift + F10 
  Run to run

• Shift + F9 
  Debug patch bug

• Ctrl + Shift + F10 
  Run context configuration from editor

• Ctrl + Shift + X 
  Run command line Run command line

Debugging Debugging related shortcuts

• F8 
  Step over does not enter the function

• F7 
  Step into single step execution

• Shift + F7 
  Smart step into Smart step

• Shift + F8 
  Step out

• Alt + F9 
  Run to cursor to run to the cursor

• Alt+ F8 
  Evaluate expression Evaluate expression

• F9 
  Resume program to restart the program

• Ctrl + F8 
  Toggle breakpoint Toggle breakpoint

• Ctrl + Shift + F8 
  View breakpoints View breakpoints

Navigation positioning related shortcuts

• Ctrl + N 
  Go  to class Jump to the specified class

• Ctrl + Shift + N 
  Go to file Quickly find files in the project by file name

• Ctrl + Alt +Shift + N 
  Go to symbol Find function location by one character

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

• F12 
  Go back to 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 active….tab

• Ctrl + G 
  Go to line jump to the first few lines

• Ctrl + E 
  Recent files popup Pop up recently opened files

• Ctrl + Alt + Left/Right 
  Navigate back/forward Navigate forward/backward

• Ctrl + Shift + Backspace 
  Navigate to 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 to method definition

• Ctrl + Shift + I 
  Open quick definition lookup

• Ctrl + U 
  Go to super-method/super-class

• Alt + Up/Down 
  Go to previous/next method Quickly move positioning between methods

• Ctrl + ]/[ 
  Move to code block end/start Jump to code block end/start

• Ctrl + F12 
  File structure popup

• Ctrl + H 
  Type hierarchy

• Ctrl + Alt + H 
  Call hierarchy

• F2/ Shift + F2 
  Next/previous highlighted error Jump to the next/previous error, highlight errors or warnings to quickly locate, 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

• F11 
  Toggle bookmark toggle mark

• Ctrl + F11 
  Toggle bookmark with mnemonic

• Ctrl + #[0-9] 
  Go to numbered bookmark Go to numbered bookmark

• Shift + F11 
  Show bookmark Show bookmarks

Refactoring Refactoring related shortcuts

• F5
  Copy

• F6 
  Move

• Alt + Delete 
  Safe Delete Safe delete

• Shift + F6 
  Rename Rename

• Ctrl + Alt + N 
  Inline Variable Inline Variable

• Ctrl + Alt + M 
  Extract Method( Javascript only) Extract function

• Ctrl + Alt + V 
  Introduce Variable

• Ctrl + Alt + F 
  Introduce Field

• Ctrl + Alt + C 
  Introduce Constant

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 Commit 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 invoke the editor's function

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

• Ctrl + Alt + F11 
  Toggle full screen mode Toggle full screen mode

• Ctrl + Shift + F12 
  Toggle maximizing editor

• Alt + Shift + F 
  Add to Favorites Add the current file to Favorites

• Alt + Shift + I 
  Inspect current file with current profile

• Ctrl + BackQuote( ) 
  Quick switch current scheme Quickly switch existing combinations

• Ctrl + Alt + S 
  Open setting dialog

• Ctrl + Tab 
  Switch between tabs and tool window Tab and tool window conversion (conflicts with windows shortcut keys)