Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use webstorm for you. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

WebStorm is a JavaScript development tool of JetBrains company. It has been praised by the majority of Chinese JS developers as "Web front-end development artifact", "the most powerful HTML5 editor", "the most intelligent JavaScript IDE" and so on. It is homologous with IntelliJ IDEA and inherits the functions of IntelliJ IDEA's powerful JS part.

Setup skills:

How to change the theme (font & color matching):

File-> settings-> Editor-> colors&fonts-> scheme name. Topic download address

How to make webstorm start without opening the project file:

File-> Settings- > General remove Reopen last project on startup.

How to display Chinese perfectly:

Check Override default fonts by (not recommended) in File-> Settings- > Appearance to set Name:NSimSun,Size:12

How to display line numbers:

File-> Settings- > Editor, tick "Show line numbers" and the line number will be displayed.

How to wrap the code automatically:

When File-> settings-> Editor "Use Soft Wraps in editor" is ticked, the code will automatically wrap

How to click the cursor to display at the end of the line:

File-> Settings- > Editor "Allow placement of caret after end of line" just uncheck it.

How to modify keyboard keys:

File-> Settings- > Keymap, then double-click the function that you want to modify the shortcut, there will be a prompt box, follow the prompt

Replace it with the keyboard keys that you are familiar with the editor:

File-> Settings- > Keymap supports mainstream IDE such as Visual Studio, Eclipse, and NetBeans.

Javascript class library hint.

File-> settings-> Javascript-> Libraries-> then select the javascript class library that you often use in the list, and finally Download and Install ok.

When developing js, you found that ctrl + return was required to select the option:

File-> Setting-> Editor-> Code Completion-> Preselect the first suggestion: "Smart" changed to "Always"

The js prompt is slow.

Change 1000 to 0 under File-> Code Completion-> Autopopup in

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 css-X-fire plug-ins to install. (the "css-X-fire" plug-in is used to change the css code in the editor when you use firebug to modify the css properties. )

Update later

Experience of using webstorm

Favorites function:

When the project directory is very large, some subdirectories are opened frequently, but the hierarchy is very deep. At this time, you can add the directory to your favorites. After adding it successfully, there is a "Favorites" menu on the left.

Bread crumb navigation:

In addition to the project page on the left, you can select a directory, and a directory similar to the website breadcrumb navigation under the top menu can also achieve the same function. Click on each directory and there will be a drop-down menu showing the subdirectories under it, which is very practical.

Constructor interface:

Comments appear if they conform to the format. If it is a js file, it is the functions and objects of the js class; the css file is a summary of the css file; and the html file is the node structure diagram. These are just for the convenience of looking at the structure of the code.

Todo interface:

Add todo comments to the code and this interface appears.

Double column code interface:

Right-click the file on the Code tab, and then right-> spilt vertically (left and right screen) or spilt horizontally (upper and lower screen)

Local history features:

A good way to get the code back

WebStorm integrated git use

Webstorm integrates only the common operations of git and does not completely replace command-line tools. You can see which git branch you are in in the lower right corner of the interface. You can also click switch or create a new branch above.

View the differences between the current code and the version library code:

Right-click any area of the code interface, select git-> compare with, and then select the version library you want to compare.

Description of webstorm shortcut key

Editing edit related keyboard shortcuts

Ctrl + Space:

Basic code completion (the name of any class, method or variable) basic code completion (any class, function, or variable name), changed to Alt+S

Ctrl + Shift + Enter:

Complete statement completes the current statement

Ctrl + P:

Parameter info (within method call arguments) parameter information including method call parameters

Ctrl + mouse over code

Brief Info simple message

Ctrl + F1

Show description of error or warning at caret displays an error message or warning message for the location of the cursor

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

Ctrl + I

Implement methods implementation method

Ctrl + Alt + T

Surround with... (if, else, try, catch, for, etc) use * to surround selected lines of code (* including if, while, try catch, etc.)

Ctrl + /

Comment/uncomment with line comment Line comment / Uncomment Line

Ctrl + Shift + /

Comment/uncomment with block comment Block comment / Unblock comment

Ctrl + W

Select successively increasing code blocks selects code blocks, usually incrementally.

Ctrl + Shift + W

Fallback of the last shortcut key in Decrease current selection to previous state, decrement selection code

Alt + Q

Context info context information

Alt + Enter

Show intention actions and quick-fixes intends to take action to achieve quick results

Ctrl + Alt + L

Reformat code formats the code according to the template format

Tab/ Shift + Tab

Indent/unindent selected lines performs indentation / undo indentation on selected lines

Ctrl + X or Shift + Delete

Cut current line or selected block to clipboard cuts the current line or selected code block to the clipboard

Ctrl + C or Ctrl + Insert

Copy current line or selected block to chipboard copies the current line or selected code block to the clipboard

Ctrl + V or Shift + Insert

Paste from clipboard pastes the contents of the clipboard

Ctrl + Shift + V

The latest content in the Paste from recent buffers paste buffer

Ctrl + D

Duplicate current line or selected block copies the current line or selected code block

Ctrl + Y

Delete line at caret delete the line where the cursor is located

Ctrl + Shift + J

Smart line join (HTML and JavaScript only) join the smart line (HTML and JavaScript)

Ctrl + Enter

Smart line split (HTML and JavaScript only) separates smart rows (HTML and JavaScript)

Shift + Enter

Start new line starts a new line.

Ctrl + Shift + U

Case conversion where the Toggle case for word at caret or selected block cursor is located

Ctrl + Shift +] / [

Select till code block end/start select until the end / start of the code block

Ctrl + Delete

Delete to word end end of deleting text

Ctrl + Backspace

Delete to word start start deleting text

Ctrl + NumPad+/-

Expand/collapse code block expansion / reduction of code blocks

Ctrl + Shift+ NumPad+

Expand all expands all

Ctrl + Shift+ NumPad-

Collapse reduces all

Ctrl + F4

Close active editor tab closes active editing tags

Search/replace search / replace related shortcut keys

Ctrl + F

Quickly find the code within the current file of Find

Ctrl + Shift + F

Find in path specifies the search path within the file

F3

Find next finds the next

Shift + F3

Find previous finds the previous

Ctrl + R

Code substitution in current file of Replace

Ctrl + Shift + R

Replace in path specifies the batch substitution of the code in the file

Usage Search search related shortcut keys

Alt + F7/Ctrl + F7

Find usages/Find usages in file find use / find use in file

Ctrl + Shift + F7

Wonderful use in Highlight usages in file files

Ctrl + Alt + F7

Show usages display using

Running operation

Alt + Shift + F10

Select configuration and run select architecture, run

Alt + Shift + F9

Select configuration and debug chooses architecture to fix vulnerabilities

Shift + F10

Run operation

Shift + F9

Debug fixes vulnerabilities

Ctrl + Shift + F10

Run context configuration from editor runs content architecture from editor

Ctrl + Shift + X

Run command line runs the command line

Debugging Debugging related shortcut key

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

Alt + F9

Run to cursor runs to the cursor

Alt+ F8

Evaluate expression evaluation expression

F9

Resume program restart the program

Ctrl + F8

Toggle breakpoint handoff breakpoint

Ctrl + Shift + F8

View breakpoints View breakpoint

Navigation positioning related shortcut key

Ctrl + N

Go to class jumps to the specified class

Ctrl + Shift + N

Go to file quickly finds the files in the project through the file name

Ctrl + Alt + Shift + N

Go to symbol finds the position of the function through a character

Alt + Right/ left

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

F12

Go back to previous tool window enters the previous tool window

Esc

Go to editor (from tool window) enters the editor from the tool window

Shift + Esc

Hide active or last active window hides the active window

Ctrl + Shift + F4

Close active run/message/find/... Tab shutdown activity … . Label

Ctrl + G

Which line does Go to line jump to?

Ctrl + E

Recent files popup pops up the recently opened file

Ctrl + Alt + Left/Right

Navigate back/forward navigation forward / backward

Ctrl + Shift + Backspace

Navigate to last edit location locates and navigates to recent edits

Alt + F1

Select current file or symbol in any view finds the location of the currently selected code or file in other interface modules

Ctrl + B or Ctrl + Click

Go to declaration jumps to the definition

Ctrl + Alt + B

The implementation of Go to implementation (s) jump method

Ctrl + Shift + B

Go to type declaration jump method definition

Ctrl + Shift + I

Open quick definition lookup Open definition Quick find

Ctrl + U

Go to super-method/super-class jump method / super class

Alt + Up/Down

Go to previous/next method quickly moves and locates between methods

Ctrl +] / [

Move to code block end/start Jump to Encoding Block end / start

Ctrl + F12

File structure popup file structure pops up

Ctrl + H

Type hierarchy type hierarchy

Ctrl + Alt + H

Call hierarchy call hierarchy

F2 / Shift + F2

Next/previous highlighted error jumps to the next / previous error, highlight error or warning to quickly locate, and 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 displays the navigation bar

F11

Toggle bookmark toggle tag

Ctrl + F11

Toggle bookmark with mnemonic uses memory switching markers

Ctrl + # [0-9]

Go to numbered bookmark jumps to numbered tags

Shift + F11

Show bookmark display tag

Refactoring refactoring related shortcut keys

F5

Copy copy

F6

Move Mobility

Alt + Delete

Safe Delete secure deletion

Shift + F6

Rename renaming

Ctrl + Alt + N

Inline Variable embedded variable

Ctrl + Alt + M

Extract Method (Javascript only) extraction function

Ctrl + Alt + V

Introduce Variable introduces variables

Ctrl + Alt + F

Introduce Field lead-in domain

Ctrl + Alt + C

Introduce Constant introduces constant

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

Alt + BackQuote ()

'VCS'quick popup quickly pops up VCS

Ctrl + K

Commit project to VCS submits the project to VCS

Ctrl + T

Update project from VCS updates the project from VCS

Alt + Shift + C

View recent changes to see the latest changes

Related shortcuts commonly used in General

Ctrl + Shift + A

Find action finds and invokes the editor's function

Alt + # [0-9]

Open corresponding tool window Quick switch Open Interface Module

Ctrl + Alt + F11

Toggle full screen mode toggles full screen mode

Ctrl + Shift + F12

Toggle maximizing editor Toggle maximize Editor

Alt + Shift + F

Add to Favorites adds the current file to your favorites

Alt + Shift + I

Inspect current file with current profile uses current properties to check the current file

Ctrl + BackQuote ()

Quick switch current scheme quickly converts existing combinations

Ctrl + Alt + S

Open setting dialog opens the settings dialog box

Ctrl + Tab

Conversion of Switch between tabs and tool window tags and tool windows (conflicts with windows shortcuts)

This is the end of the article on "how to use webstorm". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.