JavaScript Development Tools Webstrom Use guide _javascript tips

See Online An Introduction Webstrom article, feel the function is really powerful, also know why Alibaba's front-end to GitHub file on why there is a. idea file, (legend Taobao Internal recommended to write JS with Webstrom)

We can understand that the IDE integrates a lot of the features you want, or that you don't want. In other words, there are a lot of plug-ins installed editor, so so far, I still feel that there is no need to install any plug-ins.

So let's start by introducing the 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 there is no familiar * in the upper-right corner of the webstorm edit file.
Benefits: Save Ctrl + S, in combination with Firefox vim, the basic mouse will be able to see the results page.
Disadvantage: No previous * logo, in case of keyboard misoperation will also be stored immediately.
Any editor will have no history as long as the file is closed, but Webstorm has. Vcs->local History-> Show History (shortcut key: alt+~-〉7)
Benefits: As long as Webstorm does not close, your file can always return to the previous operation (which is why in Webstorm ctrl+y is the reason to delete a row).
Cons: Webstorm shutdown After the restart of these historical records are not; there is also a disadvantage is that the resulting memory consumption is also necessarily relatively large.
Any editor, except server SVN, has no local version, but Webstorm provides a local file modification history (shortcut key: Alt+shift+c). You can also Ctrl + E eject the recently opened file.
Benefits: equivalent to local SVN.
Disadvantage: The memory consumption is also necessarily relatively large.
Integrated Zencoding,html5,ftp, instant editor (Chrome), AutoComplete, Mozilla based JavaScript debugger, JSLint, less support, coffeescript support, node.js, Unit test, Integrates features such as Git and svn versioning.
In writing CSS, you will be smart to prompt the various files and the path of the picture, you do not have to confirm the existence of the file.
Other features on the introduction, want to know more can go to Webstrom official website to continue to find. After reading the introduction and so many of the characteristics of the force, is not a kind of impulse to try the legend of the front-end artifacts AH? Well.

First download the official download page after the Webstrom, click Install, and then always next, the final will appear to need registration code interface, because Webstrom is the business of the IDE, and the celestial cock Silk front-end of course not so much money to buy so expensive artifact, don't worry, We can learn to use this front-end artifact using the Webstorm key. hehe ~ ~ ~ ~

After the installation of success, there will be some discomfort, just like I think this color really too poke. There are also some settings that I do not want. Then I'll list the settings I'm used to.

some setup tips for Webstorm after installation :

How to change themes (font & color):
File-> settings-> Editor-> colors&fonts scheme name. Subject Download Address
How to get Webstorm to start without opening the project file:
File-> settings->general remove reopen last project on startup.
How to display Chinese perfectly:
In File-> settings->appearance, check override default fonts by (not recommended), set Name:nsimsun,size:12
How to display line numbers:
The File-> settings->editor, "Show lines numbers" tick, the line number is displayed
How do I wrap code automatically:
File-> settings-> Editor "Use Soft wraps in Editor" to the bait, the code will automatically wrap the line
How to click the cursor to display at the end of the line:
File-> Settings->editor "Allow placement of caret after the line" remove the hook.
How to modify the Quick key:
File-> Settings->keymap, and then double-click the function to modify the shortcut will be prompted to come out, follow the instructions
Switch to a quick key that is familiar to your editor:
File->settings->keymap support for mainstream Ides such as Visual Studio, Eclipse, and NetBeans.
JavaScript class library hints.
File-> settings-> javascript-> libraries-> then select the JavaScript class library that you often use in the list, and finally download and install OK.
In the development of JS found that need CTRL + RETURN to select candidates:
File-> Setting-> Editor-> Code completion-> preselect the "the": "Smart" to "suggestion"
JS hint slower
File-> Code Completion-> autopopup in 1000 change to 0
Git configuration:
File-> settings-> Editor-> GitHub, go in to change the GitHub account, if not git does not need.
Plug-in installation:
File->plugins and then install the plugins that you choose to force. (The "Css-x-fire" plug-in that changes the CSS code within the editor when you use Firebug to modify CSS properties.) ）
Update later

Webstorm Use Experience

Favorites Feature:

When the engineering directory is very large, some subdirectories are very often open, but the level is very deep, this time can add the directory to the Favorites, add success, the left side of the "Favorites" menu

Breadcrumbs Navigation:

In addition to the engineering page on the left, you can select a directory, and under the top menu there is a similar web breadcrumb directory that can achieve the same work. Clicking on each directory will have a drop-down menu showing the subdirectories under it, very practical.

Constructor interface:

Annotations appear when they are in line with the format. If the JS file is JS class functions and objects; CSS file is the generalization of this CSS file, HTML file is the node's structure diagram. In other words, these are for the convenience of viewing the structure of the code.

Todo interface:

This interface appears when you add a todo annotation to the code

Two-Column code interface:

Right-click the file on the Code tab, and then right-click-> spilt vertically (left and right) or spilt horizontally (up and down two screens)

Local History Features:
A good way to get your code back

Git uses

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

To view 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 to compare.

Webstorm Shortcut key Description:

Editing edit related shortcut keys

Ctrl + Space:
Basic code completion (the name of any class, method or variable) The CODEBASE is complete (any class, function, or variable names) and changed to Alt+s
Ctrl + Shift + Enter:
Complete statement Full current statement
Ctrl + P:
Parameter info (within methods call arguments) parameter information includes method invocation parameters
Ctrl + mouse over code
Brief Info Simple Info
Ctrl + F1
Show description by error or warning at caret displays an error message or warning message at 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 within a class
Ctrl + O
Override methods Overload method
Ctrl + I
Implementation method of Implement methods
Ctrl + Alt + T
Surround With ... (if, else, try, catch, for, etc) surround the selected line of code with * (* includes if, while, try catch, and so on)
Ctrl +/
Comment/uncomment with line Comment comment/Cancel line comment
Ctrl + Shift +/
Comment/uncomment with blocks Comment Block comments/Cancellation block annotations
Ctrl + W
Select successively increasing code blocks choose a block, typically incremental selection
Ctrl + Shift + W
Decrease current selection to previous the fallback of the last shortcut key, decrement selection code
Alt + Q
Context Info Contextual Information
Alt + Enter
Show intention actions and quick-fixes intent action, quick effect
Ctrl + Alt + L
Reformat code formats codes based on template format
Tab/shift + Tab
Indent/unindent Selected lines indent/Undo indent processing for selected rows
Ctrl + X or Shift + Delete
Cut-current lines or selected block to Clipboard cuts the line or selected code blocks to the Clipboard
CTRL + C or CTRL + Insert
Copy current lines or selected block to chipboard copies the present line or selected code blocks to the Clipboard
Ctrl + V or Shift + Insert
Paste from clipboard Paste the contents of the Clipboard
Ctrl + Shift + V
Paste from recent buffers the latest content in the paste buffer
Ctrl + D
Duplicate current lines or selected blocks to copy the active line or the selected code block
Ctrl + Y
Delete line at caret delete cursor location row
Ctrl + Shift + J
Smart line join (HTML and JavaScript only) to add intelligent rows (HTML and JavaScript)
Ctrl + Enter
Smart line split (HTML and JavaScript only) separates intelligent rows (HTML and JavaScript)
Shift + Enter
Start New Line another row
Ctrl + Shift + U
Toggle case to Word at the location of the caret or selected block cursor
Ctrl + Shift +/[
Select till code block End/start until the end/start of blocks
Ctrl + Delete
Delete to Word end deletes text ending
Ctrl + Backspace
Delete to Word start remove text begin
Ctrl + numpad+/-
Expand/collapse code block extension/Shrink blocks
Ctrl + shift+ numpad+
Expand All expands all
Ctrl + shift+ numpad-
Collapse reduced All
Ctrl + F4
Close Active Editor tab closes active edit tab
Search/replace Search/substitution related shortcut keys

Ctrl + F
Find code for quick Lookup in current file
Ctrl + Shift + F
Find in path Specify file search path
F3
Find Next finds Next
Shift + F3
Find previous finds a previous
Ctrl + R
Replace the current file within the code substitution
Ctrl + Shift + R
Replace in path specify code bulk substitution in file
Usage Search for related shortcut keys

Alt + F7/ctrl + F7
Find Usages/find usages in file found using/found using in Files
Ctrl + Shift + F7
Wonderful use of highlight usages in file
Ctrl + Alt + F7
Show usages display using
Running run

Alt + Shift + F10
Select configuration and run selects the architecture and runs
Alt + Shift + F9
Select Configuration and debug to choose a schema to patch a vulnerability
Shift + F10
Run runs
Shift + F9
Debug Patch Vulnerability
Ctrl + Shift + F10
Run context configuration from editor running content architecture from edit
Ctrl + Shift + X
Run command line
debugging debugging related shortcut keys

F8
Step over does not enter function
F7
Step Into stepping
Shift + F7
Smart Step into intelligent stepping
Shift + F8
Step out Jump out
Alt + F9
Run to Cursor at cursor
ALT + F8
Evaluate expression Evaluation and expression
F9
Resume Program Restart
Ctrl + F8
Toggle Breakpoint Toggle Breakpoint
Ctrl + Shift + F8
View breakpoints Viewing breakpoints
Navigation location-related shortcuts

Ctrl + N
Go to class jumps to the specified class
Ctrl + Shift + N
Go to file quickly find files in a project by file name
Ctrl + Alt +shift + N
Go to symbol finds a function position by a character
Alt + right/left
Go to next/previous Editor tab into the next/previous editor option
F12
Go back to previous tool windows into the previous tool window
Esc
Go to Editor (from tool window) into the editor from the tool windows
Shift + ESC
Hide active or last active Windows hidden active window
Ctrl + Shift + F4
Close active Run/message/find/...tab shutdown activity .... label
Ctrl + G
Go to line jumps to the first few lines
Ctrl + E
The recent files popup pops up the most recently opened file
Ctrl + Alt + left/right
Navigate Back/forward navigation forward/back
Ctrl + Shift + Backspace
Navigate to last edit location navigates to the most recent edits
Alt + F1
Select Current file or symbol in any view to find the location of the currently selected code or file in another interface module
CTRL + B or CTRL + Click
Go to declaration jump to definition
Ctrl + Alt + B
Go to implementation (s) Jump method implementation Branch
Ctrl + Shift + B
Go to type declaration Jump method definition Place
Ctrl + Shift + I
Open Quick Definition Lookup open define Quick Find
Ctrl + U
Go to Super-method/super-class Jump method/Superclass
Alt + Up/down
Move to Previous/next fast moves positioning between methods
Ctrl +/[
Moves to the code block End/start jump to the end/start
Ctrl + F12
File structure popup Files structure Popup
Ctrl + H
Type hierarchy hierarchy of types
Ctrl + Alt + H
Call Hierarchy Calling Hierarchy
F2/shift + F2
Next/previous highlighted error jumps to the last/previous error, highlighting error or warning quick Positioning, use this shortcut to quickly jump between the statements in error.
F4/ctrl + Enter
Edit Source/view source Editing sources/viewing source code
Alt + Home
Show navigation bar display navigation bar
F11
Toggle Bookmark Toggle Marker
Ctrl + F11
Toggle bookmark with mnemonic using memory switch marker
Ctrl + #[0-9]
Go to numbered bookmark jumps to numbered tags
Shift + F11
Show Bookmark Display Marker
Refactoring refactoring related shortcut keys

F5
Copy copy
F6
Move moves
Alt + Delete
Safe Delete Safely
Shift + F6
Rename renaming
Ctrl + Alt + N
Inline Variable Embedded Variable
Ctrl + Alt + M
Extract method (Javascript only) Extract function
Ctrl + Alt + V
Introduce Variable Introducing variables
Ctrl + Alt + F
Introduce field introduction domain
Ctrl + Alt + C
Introduce Constant Introducing constants
Vcs/local History Version control system/local history related shortcut keys

Alt + backquote ()
' VCs ' Quick popup popup VCS
Ctrl + K
Commit project to VCS submit projects to VCs
Ctrl + T
Update project from VCS updates projects from the VCS
Alt + Shift + C
View Recent changes See latest changes
General related shortcut keys

Ctrl + Shift +a
Find action finds and invokes the editor's functionality
Alt + #[0-9]
Open corresponding tool window quick switch Opening interface module
Ctrl + Alt + F11
Toggle Full Screen mode toggle Full-screen
Ctrl + Shift + F12
Toggle Maximizing editor Toggle maximize Editor
Alt + Shift + F
Add to Favorites Add the current file to the Favorites folder
Alt + Shift + I
Inspect the current file with the current profile
Ctrl + backquote ()
Quick Switch Current scheme fast convert existing portfolio
Ctrl + Alt + S
Open Setting dialog Opens the Settings dialog box
Ctrl + Tab
Switch between Tabs and Tool window tabs and tool windows (conflicts with Windows shortcut keys)

Small partners are not already on this JavaScript development tool Webstrom have some understanding of it, can't wait to try it, make sure you use it after it.