I saw an article introducing webstrom on the Internet and felt that the function is really powerful. I also know why the files transmitted to github on Alibaba's front-end have a .idea file. (It is said that Taobao recommends writing JS to use webstrom within it)
We can understand that IDE integrates a lot of features you want, or features you don't want. In other words, editors with many plug-ins are installed, so so far, I still feel that there is no need to install any plug-ins for it.
Then let’s start introducing the special features of webstrom :
WebStorm is a commercial JavaScript development tool launched by JetBrains
Any editor needs to be saved (ctrl + s), which is the feature of editing software on all win platforms, but the upper right corner of the webstorm editing file does not have that familiar*.
Benefits: After eliminating ctrl + s, you can see the result page without moving the mouse.
Disadvantage: Without the previous * logo, it will be stored immediately if the keyboard is incorrectly operated.
As long as the file is closed, there will be no history for any editor, but webstorm has it. vcs->Local History -> Show History (shortcut key: ALT+~ ->7)
Advantage: As long as webstorm is not closed, your file can be returned to the previous operation at any time (this is why ctrl+y is the reason why in webstorm, it is because of deleting a line).
Disadvantages: These historical records are gone after webstorm is closed and restarted; another disadvantage is that the memory consumption caused by this will inevitably be relatively large.
Any editor has no local version except server svn, but webstorm provides a local file modification history (shortcut key: ALT+SHIFT+c). You can also Ctrl + E to pop up the recently opened file.
Benefits: equivalent to local svn.
Disadvantage: The memory consumption must be relatively large.
Integrates zencoding, html5, ftp, instant editing (chrome), automatic completion, Mozilla-based JavaScript debugger, JSLint, Less support, CoffeeScript support, Node.JS, unit testing, integrated git and svn version control and other features.
When writing CSS, you will intelligently prompt various files and pictures, so you no longer need to confirm whether this file exists.
Other features are introduced. If you want to know more, you can go to the official website of the webstrom to continue searching. After reading this introduction and so many powerful features, are you urged to try this legendary front-end artifact right away? Um.
First, after downloading webstrom on the official download page, click Install, and then continue to the next step. Finally, the registration code interface will appear, because webstrom is a commercial IDE, and of course the silk front end of the Tianchao does not have that money to buy such an expensive artifact. Don’t worry, we can use the WebStorm key to learn to use this front-end artifact. Hehe~~~~
After the installation is successful, I will definitely feel a little uncomfortable, just like I think this color scheme is really too sensible. There are some settings that I don't want, either. Then below I will list the settings I am used to.
Some setup tips after webstorm installation :
How to change the theme (fonts & color scheme):
File -> settings -> Editor -> colors&fonts -> scheme name. Theme download address
How to prevent webstorm from opening project files when starting:
File -> Settings->General Remove Reopen last project on startup.
How to perfectly display Chinese:
Check Override default fonts by (not recommended) in File -> Settings->Appearance, set Name:NSimSun, Size:12
How to display line numbers:
File -> Settings->Editor, "Show line numbers" check it and the line number will be displayed.
How to wrap the code automatically:
File -> settings -> Editor "Use Soft Wraps in editor" is hooked and the code will automatically wrap the line
How to click the cursor, it will be displayed at the end of this line:
File -> Settings->Editor "Allow placement of caret after end of line" Just remove the hook.
How to modify the fast key:
File -> Settings->Keymap, and then double-click the function you want to modify quickly. There will be a prompt box. Follow the prompts.
Change to the fast keys you are familiar with the editor:
File ->Settings->Keymap supports mainstream IDEs such as Visual Studio, Eclipse, and NetBeans.
JavaScript class library prompts.
File -> settings -> Javascript -> Libraries -> Then select the Javascript class library you often use in the list, and finally Download and Install will be OK.
When developing js, it is found that ctrl + return is needed to select candidates:
File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion: "Smart" to "Always"
js prompt is slow
File -> Code Completion -> Autopopup in 1000 to 0
git configuration:
File -> settings -> Editor -> github, go in and change the github account, if there is no git, you don't need it.
Plugin installation:
File ->plugins, then select the powerful plugins and install them. (The "css-X-fire" plugin is used to modify the css attributes using firebug, the css code in the editor will also change.)
Update later
Webstorm usage experience
Favorites function:
When the project directory is huge, some subdirectories are open very often, but the levels are very deep. At this time, you can add the directory to your favorites. After successful addition, there is a "Favorites" menu on the left.
Breadcrumb navigation:
In addition to the project page on the left, you can select a directory, under the top menu, a directory similar to the website breadcrumb navigation can also achieve the same function. Clicking on each directory will have a drop-down menu to display the subdirectories under it, which is very practical.
Constructor interface:
If the comments are in line with the format, it will appear. If it is a js file, it is a function and object 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 a node structure diagram. By the way, these are for the convenience of viewing the structure of the code.
todo interface:
This interface will appear if you add todo comments to the code
Double column code interface:
Right-click the file on the code tab, and right-click -> spilt vertically (two screens on the left and right) or spilt horizontally (two screens on the upper and lower)
Local history features:
A good way to retrieve the code
Use git
Webstorm only integrates common operations of git and 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 above.
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 version library you want to compare.
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), changed 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 care Display error or warning at care
Alt + Insert
Generate code… (Getters, Setters, Constructors) Create a new file or generate code,…Constructors, you can create getters and setter methods for any field in the class
Ctrl + O
Override methods overload method
Ctrl + I
Implement methods implementation method
Ctrl + Alt + T
Surround with…(if, else, try, catch, for, etc) uses * to surround the selected line of code, (* includes if, while, try catch, etc.)
Ctrl + /
Comment/uncomment with line comment Line comment/uncomment
Ctrl + Shift + /
Comment/uncomment with block comment Block comment/uncomment
Ctrl + W
Select successfully increasing code blocks Select code blocks, generally incremental selection
Ctrl + Shift + W
Decrease current selection to previous state The fallback of the previous shortcut key, the decrement selection code
Alt + Q
Context info context information
Alt + Enter
Show intention actions and quick-fixes
Ctrl + Alt + L
Reformat code formats code according to template format
Tab/ Shift + Tab
Indent/unindent selected lines Indent/unindent selected lines indent/unindent indentation
Ctrl + X or Shift + Delete
Cut current line or selected block to 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
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 care Delete line at the cursor
Ctrl + Shift + J
Smart line join (HTML and JavaScript only)
Ctrl + Enter
Smart line split (HTML and JavaScript only)
Shift + Enter
Start new line
Ctrl + Shift + U
Toggle case for word at care or selected block case conversion
Ctrl + Shift + ]/[
Select till code block end/start Select until 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
Ctrl + Shift + NumPad-
Collapse all
Ctrl + F4
Close active editor tab Close active editing tag
Search/replace search/replace related shortcut keys
Ctrl + F
Find Quick search code in the current file
Ctrl + Shift + F
Find in path Specify the path to find in the file
F3
Find next
Shift + F3
Find previous
Ctrl + R
Replace the code replacement in the current file
Ctrl + Shift + R
Replace in path Specify batch substitution of code in the file
Usage Search Search Related Shortcut Keys
Alt + F7/Ctrl + F7
Find usages/Find usages in file Find usage/Find usage
Ctrl + Shift + F7
Highlight usages in file
Ctrl + Alt + F7
Show usage
Running
Alt + Shift + F10
Select configuration and run
Alt + Shift + F9
Select configuration and debug Select the architecture to fix vulnerabilities
Shift + F10
Run
Shift + F9
Debug patch vulnerabilities
Ctrl + Shift + F10
Run context configuration from editor Run content architecture from editor
Ctrl + Shift + X
Run command line
Debugging Debugging related shortcut keys
F8
Step over does not enter the function
F7
Step into step-by-step
Shift + F7
Smart step into Smart step into
Shift + F8
Step out
Alt + F9
Run to cursor Run to cursor
Alt+ F8
Evaluate expression
F9
Resume program restarts the program
Ctrl + F8
Toggle breakpoint switch breakpoint
Ctrl + Shift + F8
View breakpoints
Navigation Positioning related shortcut keys
Ctrl + N
Go to class jump to the specified class
Ctrl + Shift + N
Go to file Quickly find files in a project through file names
Ctrl + Alt + Shift + N
Go to symbol Find function position by one character
Alt + Right/ left
Go to next/ previous editor tab Go to next/ Previous editor option
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
Ctrl + Shift + F4
Close active run/message/find/…tab Close activity….
Ctrl + G
Go to line jump to the line
Ctrl + E
Recent files popup Popup the recently opened file
Ctrl + Alt + Left/Right
Navigate back/forward Navigate forward/back
Ctrl + Shift + Backspace
Navigate to last edit location 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 definition
Ctrl + Alt + B
Go to implementation(s) jump method implementation location
Ctrl + Shift + B
Go to type declaration jump method definition
Ctrl + Shift + I
Open quick definition lookup Open definition quick search
Ctrl + U
Go to super-method/super-class jump 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 end/start of encoding 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 to quickly locate, use this shortcut key to quickly jump between the wrong statements.
F4/Ctrl + Enter
Edit source/View source Edit source/View source
Alt + Home
Show navigation bar
F11
Toggle bookmark toggle marker
Ctrl + F11
Toggle bookmark with mnemonic
Ctrl + #[0-9]
Go to numbered bookmark Jump to numbered mark
Shift + F11
Show bookmark
Refactoring Refactoring Related Shortcut Keys
F5
Copy
F6
Move
Alt + Delete
Safe Delete Safe Delete
Shift + F6
Rename Rename
Ctrl + Alt + N
Inline Variable Embed variables
Ctrl + Alt + M
Extract Method( Javascript only) Extract function
Ctrl + Alt + V
Introduction Variable
Ctrl + Alt + F
Introduction Field
Ctrl + Alt + C
Introduction Constant
VCS/Local History Version Control System/Local History Related Shortcut Keys
Alt + BackQuote( )
'VCS'quick popup VCS quickly
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 latest changes
Commonly used related shortcut keys for General
Ctrl + Shift +A
Find action The function of finding and calling the editor
Alt + #[0-9]
Open corresponding tool window Quickly switch to open the 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 your favorites
Alt + Shift + I
Inspect current file with current profile Check the current file with current profile
Ctrl + BackQuote( )
Quick switch current scheme Quick switch current scheme
Ctrl + Alt + S
Open setting dialog Open the settings dialog box
Ctrl + Tab
Switch between tabs and tool window conversion (conflicts with windows shortcut keys)
Have you already known this JavaScript development tool webstrom? I can’t wait to try it out, and I guarantee that you will love it after using it.