Front-end development tool webstorm

We recommend a front-end development tool, webstorm. It took about half a year and found that all other tools had no right. The latest version is 4.0.2. It was 2.x six months ago.

Compared with those I used in Aptana, Dreamweaver, sublime, and Vim, high-end development tools still use this handy and intelligent tool.

1. Benefits:

1) Flexible default shortcut keys. At first, his default shortcut key is not the same as the common ones, and he does not feel comfortable (of course, in setting-> keymap, you can switch the shortcut keys of your commonly used Editor, such as Eclipse, Vim, and Mac OS ), however, I am used to discovering the rationality of the design. For example, the commonly used editors are Ctrl + Z and CTRL + Y, while webstorm is Ctrl + Z and CTRL + Shift + Z. CTRL + Shift + I view Function Definition information, CTRL + ALT + L formatCodeAnd so on.

2) more intelligent tips: differentiate the browser kernel and intelligently load the class libraries you have written. If the error message is incorrect, the intelligent red prompt is displayed; color: Try to preview the color at the number of rows and modify it. And so on. In short, it makes front-end development never so intelligent.

3) You do not need to save it. When the file is closed, undo it again and do not lose it. This is really useful. In the past, the editor had to save the file, close it, undo it, and clear it.

4) rich plug-ins. The powerful feature of the editor is the rich and orderly management of plug-ins. webstorm does a good job. Open File-> Settings...-> plugins, which contains a wide range of commonly used plug-ins bundled in webstorm, and many external custom plug-ins. Click browser repositiories... to find the plug-in you want. However, I am sorry that I have not found an automation script plug-in like ant.

 

TIPS: a) Ctrl + Shift + I can see the function definition information, F4 is a convenient shortcut to jump to the method definition, Shift + F6 local variable is renamed, and so on;

B) if some scripts do not want to be included in the smart prompt. Right-click the JS file and choose mark as plain text.

C) Select a local variable, and shift + F6 can be renamed within the local area. Of course, this function is used with caution and is still risky. Writing Java in eclipse is still not complete, you can use this method to change local variables.

2, because webstrom can modify the code display style, and can import and export, this style is recommended here, I feel very comfortable: http://www.cnblogs.com/jikey/archive/2010/12/30/1921530.html

Because the aboveArticleThe font size, code color, and JS annotation style are not in line with my style. Here I made a small adjustment: Please click here to download

How to Use and edit this style:

1) Put the following path:

XP: C: \ Documents ents and Settings \ Administrator \. webide40 \ config \ colors

Win7: C: \ Users \ User \ (User Name) \. webide40 \ config \ colors

2) Restart webstorm and choose settings...>Editor-> colors & fonts-> scheme name select custom1

3) to edit the code style, edit the code style in the colors & fonts subdirectory:

My current style is as follows:

3. Descriptions of webstorm shortcuts (from http://www.cnblogs.com/jikey ):

. CTRL + Shift + N: open files in the project (similar to Ctrl + Shift + R) to open files in any directory of the current project .. CTRL + J: Output template. CTRL + B: Jump to the variable declaration. CTRL + ALT + T: around the package Code (including zencoding wrap with abbreviation). CTRL + []: Match {} []. CTRL + F12: displays the structure of the current file. CTRL + X: Cut (delete) rows. If not selected, the entire row is directly cut. if selected, the selected content is cut. ALT + Left/ Right: Label Switching. CTRL + R: replace. CTRL + Shift + Up: Move rows. Shift + ALT + up: Block Movement ( If (){}, While  () {} Statement Block Movement). CTRL + D: Copy rows. CTRL + Shift +]/[: select the Block Code <Table>... </table> . CTRL +/ : Single line comment. CTRL + Shift +/ : Block comment. CTRL + Shift + I: If it is a class in CSS, the details of the current class will be displayed. If it is JS, the detailed information of the function will be displayed. (imagine, if you view the details on the jquery method, you can directly see the Implementation Code). If it is Php, it is still the function details at that time. CTRL + '  -/+  ' : Any code block in the project, including any nodetype = in htm, can be collapsed. 3. It automatically identifies and folds instead of selected folds .. CTRL + '  .  '  : Collapse the code of the selected code .. Shift + ESC: minimizes any small window currently activated, or Alt + '  Number key  ' , The number is displayed on the title bar of the small window .. ALT + '  7  '  : Displays the current function structure. Similar to the outline effect in eclipse. The experiment is better than Aptana, but the method name under prototype cannot be fully displayed .. If yes * On the. html page, right-click a DOM structure in the navigation bar under the file name to select the current Dom structure .. Added support for jquery in the project. File -> Settings-> JavaScript libraries-> Add add a path to files and add document support in documentations URLs. Note that to add the original uncompressed code, the *. Min. js method will not be prompted. After adding the file, there is a Download button in the menu on the right. After you click it, the latest JS library is automatically selected for search. Then, in the pop-up list, click and select one, click Download and install. This experience is not very good. There is no checkbox or radio, but the entire line is dimmed after the selection. If you add multiple versions of jquery, You can intuitively see the differences between the new methods of each version. * In this sub-menu, click under the library in the second column of the project on the Right of usage scope, and select the newly added jquery to overwrite the entire project. You can also right-click the use JavaScript library on the current page and select the top jquery support you just added. Of course, it is not the case that the more you add, the better. After you add more, there will be several milliseconds of latency after the code prompts. You need to carefully select the latest version.

 

 

PS: Of course, front-end development works well, and large editors must start and run slowly.

I have been using webstrom + editplus to improve efficiency. To do things well, you must first sharpen your tools.