Webstorm use of documents--reprint

Webstorm using the documentation overview

The best use of the front-end ide,win7 and Mac for a period of time, it feels really good to share. Version from 8 has been used to 10, on the settings 9 to 10 have a larger adjustment, the following settings from the use of 10 in the collation. The Webstorm is abbreviated as WS below.

Shortcut keys

The shortcut keys described below are related to the above skin and shortcut style settings, if you and I do not set the same will be very different. The first batch of shortcut keys given is 10, after each batch not more than 5, because the average person's short-term memory is 3-7, I remember the way the shortcut is to start coding every day first look at the shortcut key, but do not see more than 3-5 is enough, A day of coding to try to use the general three days do not deliberately to think about the basic can reach the level of muscle memory.

1-Basic

Common actions for editing windows

• Undo, Undo, Win:ctrl + Z; Mac:com + Z

• Recovery, Redo, Win:ctrl + Shift + Z; mac:com + Shift + Z

• Find, find, Win:ctrl + F; Mac:com + F

• Look for content under a folder, find in Path, Win:ctrl + Shift + F; Mac:ctrl + Shift + F

• replacement, replace, Win:ctrl + R; Mac:com + R,

• Formatting codes, reformat code, Win:ctrl + Alt + L, Mac:alt + Com + L

Action on the current cursor line or selected section

• Copy down one row or block of code, Duplicate line or block, Win:ctrl + D; Mac:com + D

• Cut, cut, Win:ctrl + X; Mac:com + X

• Remove, delete line, Win:ctrl + Y; Mac:com + Y, it is important to note that the row where the selected character is deleted

• Move lines up and down, move line up/down, Win:alt + Shift + up/down arrows; Mac:alt + Shift + up/down arrows

• Move the code block up or down, move Statement Up/down, Ctrl + Shift + up/down arrows, curly braces, block annotations, etc. are blocks of code, and a block of code will jump to the top. Code block recognition is sometimes different from what is imagined, so it is more appropriate to move a single line across code blocks

2-tab operation

• Close the current tab,close active Tab, Win:ctrl + F4; Mac:com + F4

• Toggle Tab,select Previous/next Tab, Win:alt + left and RIGHT arrow; Mac:ctrl + left and right arrows, but this and Mac system to cut the screen shortcut keys have conflict, the other side of the screen can be cut through three fingers on the touch pad to cut the screen, in fact, I usually so use, so I disabled the System cut screen shortcut keys. Disable mode: System Preferences/shortcut/mission control/Move one space to the left.

• Maximize the editing window (hide all tool windows), hide all Toll Windows Win:ctrl + Shift + F12; mac:com + Shift + F12, my super favorite shortcut, allows me to focus on writing the current block of code.

3-Cursor Movement

• Skip words, Move Caret to Previous/next word Win:ctrl + left and right arrows; Mac:alt + around key

• Jump to the beginning line end, Move Caret to lines start/end win:home/end; Mac:com + left and right arrows, in fact this is the MAC system shortcut keys are also added here

• Write in the next line, Start next lines win:shift + Enter; Mac:shift + Enter, when you change the middle part of a line to complete the code, you need to write the next line of time shortcut keys can be one step into place. It's much better and faster than moving the cursor to the end of the line and then enter the line.

• In the previous line of writing, Start New lines before current, Win:ctrl + Alt + Enter; Mac:alt + Com + Enter

• Jumps to the specified line, Win:ctrl + G; Mac:com + G

4-Folding Code

• Collapses the current code block, Collapse, Win:ctrl + num-; Mac:com + num-,num-is the minus sign next to the number keys on the top of the keyboard

• Expands the current code block, Expand, Win:ctrl + num+; Mac:com + num+

• Collapses all code blocks, Collapse all, Win:ctrl + Shift + num-; mac:com + Shift + num-, which is also my favorite shortcut, if the code is structured, folding up can see the way the code is organized, in the reference note it is easy to find the corresponding function module

• Expand all blocks of code, Expand all, Win:ctrl + Shift + num+; mac:com + Shift + num+

5-Check

• Selected Super extensions, Extend Selection, Win:ctrl + W; mac:com + W, please forgive me for this shortcut to play this exaggerated title, because this shortcut is my super favorite one, press once to select a word, two times a line, three times a block of code, too good!!

• Renaming, Rename, Win:shift + F6; Mac:shift + F6, which is a shortcut key with multiple faces. In the JS code this shortcut is a variable rename, give the variable name is really a laborious thing, with the change of business variable names must follow the adjustment, otherwise the life of the code is not too long; in HTML and CSS, and in document files, this shortcut renames the current file, and in the resource file directory, This shortcut is to rename the resource and will intelligently synchronize the reference.

6-paste

• Paste, Paste, Win:ctrl + V; Mac:com + V, a very ordinary paste

• Paste from copy history, Paste form, Win:ctrl + Shift + V; mac:com + Shift + V, I super like the function, with it will not have to repeat the copy

7-File

• Open files, file ... Win:ctrl + Shift + N; mac:com + Shift + N

• Save all, save all, Win:ctrl + S; Mac:com + S

• Create new file, new ... Win:alt + N; Mac:alt + N, under the current file sibling or selected folder

• Open a recently opened file, recent files Mac:com + E, will give a list of recently opened files

Setting 1-Basic settings

• Open settings

win:file/settings, shortcut key: Ctrl + Alt + S

mac:webstorm/preferences, shortcut key: Com +,

The following configuration is set by default in Settings and is no longer described.

• Skin

Code highlighting is necessary, the individual likes to color a softer skin, WS skin settings are divided into two layers, the first layer is a large frame, the second layer is the editing window. Requires two mating settings, or it may appear outside the white black or black outside the strange interface.

The first layer: Appearance & Behavior/appearance, in theme choose Style, Win and Mac options are different, win more, Darcula is all there, darcula black style. Two outside the proposed "Override default Fonts" selected, personally think win under Microsoft Ya Black better, mac Baghdad font is better, size set to 14 or 16 pairs of eyes good.

Second floor: Editor/colors & Fonts, in the scheme selection style, the individual also like Darcula this style, in addition to remind that only to save scheme as their own style can modify some of the more detailed configuration, Detailed configuration changes are explained in the second batch of settings below.

• Shortcut keys

KEYMAP, you can choose the rules of the whole shortcut keys, support the visual Studio, Eclipse, NetBeans and other IDE shortcuts, personal advice win under Default,mac with Mac OS X.

In the search box below you can search for shortcuts you want, cross-system or cross-style when you want to find the same shortcut that you can find by description. The following magnifier can be used to find descriptions by shortcut keys.

The following settings group the shortcut keys, Editor action is a shortcut in the edit window, and Main menu is a shortcut to the file, Tab, and various panel actions.

2-Engineering

• Open Project in New window

One drawback of webstorm is that it is not possible to open multiple projects in one IDE, which is one of the costs. If you have to have more than one window, then the IDE is set: Appearance & Behavior/system settings/project opening/open Project in New window opens the Web Storm

• The default encoding setting, Editor/file encodings,ide encoding is set when the editor is edited by default encoding format open, project encoding is set to create a new project the default encoding format for this project, The default encoding for properties files in the following settings are selected in the folder when you create a new file in the defaults encoding format.

3-code format

Code Length Reference line

It is really not recommended to write a line of code too long, nested too deep is to avoid, after all, the code is for people to see, and occasionally to the machine to do the following, so the readability of the code is very important. So there's the code length reference line. Tick show right margin test in/editor/general/appearance, uncheck the reference line disappears. The position of the reference line is actually a representation of the number of characters, and the number of characters in right Margin in/editor/code Style, personal recommendation 120.

CSS Blank line

The default CSS formatting will add a blank line between the two style blocks, removing the configuration of this empty line, Editor/code Style/css/other, and setting the value of blank lines between blocks ' to 0.

MD Document Default line wrapping

The MD document does not wrap by default, you can right-click on the left line number to select "Use Soft wraps", this way is set every time, there is a once and for all Setup method, Settings | Editor | General | Use soft wraps in editor

4-code templates

• Edit the new file template, Editor/file and Code Templates, set the default content in the new file, or add your own format template

• code block template, Editor/live Templates, code block template, if you write A for loop also from the left code to the right that is too out. When defining a template, there are a few points to note: In the bottom line to modify the applicable (scope of application), the scope should be as small as possible, otherwise prone to conflict; When defining the default value of a variable, be careful to add quotation marks, otherwise manual input is necessary, so you don't need to adjust the format manually.

5-Other odds and ends

• After setting the selected text, click the double quotation mark \ single quotation mark to surround the selection, Editor/general/smart keys, tick surround selection on type quote or brace

Write in the last grumble

Write code every day, should take a little time to cultivate the feelings of the IDE, shortcuts, code completion, plug-ins, is a few important points of investigation. Without that IDE absolutely good, skilled use is the key. Business code write a little faster to study new things, or it will be reduced to an experience with three years of this tragic situation. It's also a good feeling to write code quickly.

Statement

All parties are welcome to reprint, but please specify the source: https://github.com/longze/cellar/blob/master/web/articles/webstorm/main.md

Webstorm use of documents--reprint