Summary of the introductory use of WebStorm

This article shares with you a summary of the introductory use of WebStorm. The content has certain reference value. Friends in need can take a look. I hope it will be helpful to you.

WebStorm is built on the open source IntelliJ platform that JetBrains has developed and refined for over 15 years. It provides a unified UI that works with many popular version control systems, ensuring a consistent user experience across git, GitHub, SVN, Mercurial and Perforce. WebStorm offers customizable features, adjust it to perfectly fit your coding style, from shortcuts, fonts and visual themes to tool windows and editor layouts.

Intelligent Coding Assistance

WebStorm helps you write great code. Its smart editor features code completion, dynamic code analysis, code formatting, and refactoring to increase your productivity and take your development experience to a whole new level.

Supported Languages ​​and Frameworks

WebStorm provides first-class coding help for JavaScript, ECMAScript 6, TypeScript, CoffeeScript, Dart, and Flow.

WebStorm can help you write HTML, CSS, Less, Sass and Stylus code.

Best of all, you benefit from advanced support for Node.js and popular frameworks such as React, Angular, Vue.js, Meteor, and more.

Code Intelligent Assistance

WebStorm analyzes your project to provide the best code completion results for all methods, functions, modules, variables and classes defined in your application. Сoding assistance is context-aware and can also be framework-specific.

Enjoy code completion for properties and their values ​​when using CSS in WebStorm. In Less and Sass, get help from mixins. Of course, in HTML you get code completion for all tags and attributes.

Code Quality Analysis and Detection

WebStorm has hundreds of built-in checks covering all supported languages. Apart from this, you can also use ESLint, TSLint, Stylelint, JSCS, JSHint and JSLint.

WebStorm Editor reports all errors and warnings directly as you type, and provides many quick-fix options.

Any lines of code with possible problems in WebStorm are marked in the right editor gutter, so you can easily spot errors and warnings in long files.

You can also use WebStorm to run code quality analysis for your entire project and automatically apply selected quick fixes.

Tips for using webstorm

• How to change the theme (font & color matching) of WebStorm:
  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 WebStorm displays Chinese perfectly:
  File -> Settings->Appearance, check Override default fonts by (not recommended), set Name: NSimSun, Size: 12

• How to display line numbers in WebStorm:
  File -> Settings->Editor, check "Show line numbers" and the line numbers will be displayed

• How WebStorm makes the code automatically wrap:
  File -> settings -> Editor "Use Soft Wraps in editor" tick, the code will automatically wrap

• How to click the cursor and display WebStorm at the end of the line:
  File -> Settings->Editor Just uncheck "Allow placement of caret after end of line".

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

• How to replace WebStorm with the shortcut keys of your familiar 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 in WebStorm, I found that ctrl return is required to select the candidate option:
  File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: "Smart" to " Always”

• The js prompt in WebStorm is relatively slow to set the strategy
  File -> Code Completion -> Autopopup in the next 1000 to 0

• Git configuration in WebStorm:
  File -> settings -> Editor -> github, go in and change the github account. If you don’t have git, you don’t need it.

• WebStorm plug-in installation:
  File ->plugins, then select the powerful plug-ins and install them. (The "css-X-fire" plug-in is used to modify the css code in the editor when using firebug to modify css attributes. There will also be changes.)

Webstorm usage experience

• WebStorm's favorites function:
  When the project directory is very large, some subdirectories are often opened, but the hierarchy 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 side

• WebStorm's breadcrumb navigation:
  Except for the left side On the project page, in addition to selecting a directory, there is a directory similar to website breadcrumb navigation under the top menu to 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.

• WebStorm's 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.

• WebStorm's todo interface:
  Add todo comments to the code and this interface will appear

• WebStorm's dual-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 of WebStorm:
  A good way to retrieve code

WebStorm integrates git usage

Only git is integrated in webstorm Commonly used operations and cannot completely replace command line tools. 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 related shortcut keys for WebStorm

• ##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 Supplement Full 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
  

• 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/undo indentation of 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 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 only)
  

• 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 code block end/start
  

• 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
  

WebStorm's Search/replace search/replacement related shortcut keys

• Ctrl F

  Find Quickly find the code in the current file
  

• Ctrl Shift F

  Find in path Find the path within the specified file
  

• F3

  Find next Find the next
  

• Shift F3

  Find previous Find the previous one
  

• Ctrl R

  Replace Replace the code in the current file
  

• Ctrl Shift R

  Replace in path Batch replacement of codes in the specified file
  

WebStorm's Usage 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 file
  

• Ctrl Alt F7

  Show usages Show usage of Running using
  

#WebStorm

• 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
  

• Ctrl Shift

  #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 Jump out

• 
  Alt F9

  Run to cursor Run to Cursor position

• 
  Alt F8

  Evaluate expression Evaluate expression

• 
  F9

  Resume program Restart the program

• 
  Ctrl F8

  Toggle breakpoint Switch breakpoints

• 
  Ctrl Shift F8

  View breakpoints View breakpoints

• 
  WebStorm's 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 for function location by one character

• 
  Alt Right/ left

  Go to next/ previous editor tab Enter the next/previous editor option

• 
  F12

  Go back to previous tool window Enter the previous A 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 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 to the method implementation

• 
  Ctrl Shift B

  Go to type declaration Jump to method definition

• 
  Ctrl Shift I

  Open quick definition lookup Open quick definition lookup

• 
  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, highlight error or warning Quickly locate, 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 switch mark

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

• Shift F11
  Show bookmark Show mark

WebStorm's Refactoring 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 Introducing variables

• Ctrl Alt F
  Introduce Field Introducing fields

• Ctrl Alt C
  Introduce Constant Introduce constants

In WebStorm 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 the latest changes
  

Use Commonly used related shortcut keys in WebStorm

• 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 the 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 to inspect the current file
  

• Ctrl BackQuote( )

  Quick switch current scheme Quickly convert existing combinations
  

• Ctrl Alt S

  Open setting dialog Open setting dialog
  

• Ctrl Tab

  Switch between tabs and tool window conversion of tabs and tool windows (conflicts with windows shortcut keys)
  

The above is the detailed content of Summary of the introductory use of WebStorm. For more information, please follow other related articles on the PHP Chinese website!