Webstorm functional Characteristics and User Guide

Before with everyone to introduce the Webstorm features (Http://www.cssha.com/webstorm), then, relative to the other front-end development ide,webstorm of the bright spot? What needs to be noticed in the course of use? Now let's get to know it.

first look at what's so special about Webstorm and other Ides. 1) Auto Save, do not need you to ctrl+s again and again, all operations are stored directly, of course, if the keyboard misoperation will be stored immediately, but we can solve this problem through local version control. 2) Any editor has no history as long as the file is closed, but Webstorm has. That is, as long as the webstorm does not close, your files can be returned to the previous operation at any time, webstorm the history after the shutdown reboot. This disadvantage is also obvious, the resulting memory consumption will certainly be relatively large. 3) any editor, except for server SVN, does not have a local version, but Webstorm provides a local file modification history. 4) with the eyes of the times. Zencoding appeared in the IT World in 2009, after which few tools were integrated directly into it. Webstorm was integrated after 2.0. Node.js,html5,git,cvs and so on are not listed. 5) The provided plug-in is also relatively complete, installation is very convenient. This brings additional problems, the previous eclipse was installed third-party, Webstorm seemingly cannot install third-party plug-ins. 6) You can export the current settings: File-, export setting.

The

is truncated to configure and use the: 1 ) Theme and place the downloaded theme package in C:\Users\jikey (username). Webide10\config\colors directory, and then restart Webstorm,settings--Colors & fonts-->scheme name to select the subject name. If you have a particularly long code on the the line, remove it in front of editor-to-appearance-Show vertical indent guides. 2 ) add Vim plugin: Browse repositories, Plugins, File, Settings, right-click Download and in Stall, and then restart the IDE. 3 ) In addition to Webstorm, the company provides another development tool for Phper, Phpstorm, which is described on the home page, Phpstorm includes all Webstorm features. But used to curly braces to show the method name on the same line, so it has to be configured: Wrapping and Braces, PHP---Settings, code style, File--------Braces placement -In method Declaration:end. 4 ) zencoding The default shortcut key is tab, if you need to modify the Zencoding shortcut: File--Setting, Live Templates. 5 ) found in the development of JS, the need for CTRL + RETURN to select the prompt candidates, but also need to configure: File, Setting, Editor, Code completion-Pr Eselect The first suggestion: ' Smart ' changes to always 6 ) Note that the Webstorm debug does not support Chinese path Chinese file names.

Here are some common shortcut keys for webstorm:

1. CTRL + SHIFT +N: Open the file in the project to open the file of any directory under the current project. 2. CTRL +J: Output Template3. CTRL +B: Jump to the variable declaration place4. CTRL + ALT +T: Wrapping code around (including zencoding wrap with abbreviation)5. CTRL +[]: match {}[]6. CTRL +F12: The structure of the current file can be displayed7. CTRL +x: Cut (delete) The row, uncheck, cut the entire row directly, and cut the selection if part of the selection is selected8. ALT + left/Right : Tag Toggle9. CTRL +r: ReplaceTen. CTRL + SHIFT +Up : Line Move One. SHIFT + ALT + UP: Block Move (if(){}, while() {} statement block movement) A. CTRL +d: Row copy -. CTRL + SHIFT +]/[: Check Block code -. CTRL +/: Single-line comment the. CTRL + SHIFT +/: Block Comment -. CTRL + SHIFT +I: Show details of the current CSS selector or JS function -. CTRL +'-/+': You can collapse any block of code in the project, it is not selected collapsed, but is automatically recognized as collapsed.  -. CTRL +'.': Collapses the code for the selected code.  +. SHIFT + ESC: Any small window that is currently active is minimized, or ALT +number keys, numbers are displayed in the small window.  -. ALT +'7': Displays the current function structure.  +. In the case of a *.html page, right-click on a DOM structure in the navigation bar under the file name to select the current DOM structure as a whole.

Browser support Details Tips

keywords, tags, variables, parameters and functions of JavaScript code completion are based on the popular browser support Dom (IE, Firefox, etc.) standard that can be displayed under different browser support details.

Smart code navigation and search hints

ECMAScript's Harmony Support

Webstorm supports the latest ECMAScript version, you can try new features, each JavaScript engine implementation adds some nice features that no one else has, and when you use the currently selected JavaScript version is not supported, Webstorm will notify you, And suggest a quick fix:

Support Coffeescript

Coffeescript is a programming language that compiles JavaScript and enhances its simplicity and readability, while also adding complex features like array understanding and pattern matching. Webstorm offers you:

• Code Navigation and completion

• Rename Refactoring

• Syntax highlighting

• Error checking

• Find usage Instances

Support for node. js

Webstorm allows you to debug and validate your server-side javascript-node.js applications.

Edit the COMMONJS module structure and make the appropriate auto-complete options:

The refactoring of JavaScript

Refactoring functionality for JavaScript allows you to easily modify the code structure and undo changes.

• Move/Copy

• Safe removal

• Extract to Embedded script file

• Renaming

• Extracting variables/functions

• inline variables/functions

JavaScript Unit Test

If you are a JavaScript developer, you probably know that the quality and correctness of your application is critical. Well, conformance testing and regression testing are just a few of your pain. Support for Jstestdriver plugins.

Webstorm provides a clear picture of unit testing. From now on, jstestdriver users can measure code coverage.

Exercise your unit tests on the IDE line:

You can also see the test coverage statistics for files and directories in the Project view:

Code checking and quick fixes

To ensure better code quality, Webstorm can capture common errors in dynamic JavaScript code ...

..., and provide them with a quick fix.

Support Jslint/jshint

The JavaScript code quality tools are integrated in the IDE.

Mozilla Firefox-based JavaScript debugger

• HTML and JavaScript breakpoints

• Custom Breakpoint Properties: Pause mode, condition, pass count

• Frames, variables, and JavaScript debuggers

• Running evaluation of JavaScript expressions

Bulk Code Analysis

No need to click All files or deploy to the server. Start code Analysis for the entire source tree, you can see all the results in a single view.

Language mixed editing

Support any code in the "external" and "internal" languages-enjoy outside of the JavaScript code block, or in JavaScript string literal encoding css,html,sql etc.

Spell check

Integrated spell checker validates text, code strings, and comments on tags to avoid typos and typos on your pages. To make sure the code is more readable, even variable names, CSS classes, and ID spelling checks.

Intelligent Duplicate Code detection

Support HTML5

Webstorm also understands your code and the type of each element, and shows the methods supported by the new HTML5 element:

Simply press CTRL + SPACE and Webstorm will display all possible AutoComplete options.

Validation and quick fixes

Webstorm can fix and detect the following issues and give you more reasonable suggestions:

• Invalid CSS selector format

• Invalid CSS Property

• Unused CSS class definitions

• Invalid local anchor and more ...

• Required attributes are missing

• Invalid property or illegal value

• The link in the wrong reference file

• Duplicate properties

Whenever you see a light bulb, hit ALT + ENTER to see what Webstorm has to suggest:

Support for Zen Coding

Webstorm has a built-in Zen coding that makes it more efficient to write your code. Enter div.feature> H4 + P, press Tab and you will get

Show content

Mouse over the CSS selector in the HTML, you can immediately display the actual style of the selector; When invoking an image file, you will see a preview of the picture.

Apply Styles

This command applies the open label to the style in the tree view through the CSS style.

Template and other Web application templates for HTML5

When you create a new project, Webstorm provides some well-known project templates to use according to your needs:

Synchronization of FTP and remote files

You can use the simple configuration and intuitive user interface to open files from remote host FTP, or install network drive.

You can use the automatic synchronization feature to save local editing project files and to deploy to remote servers.

Directory exclusions on the Web server's configuration tags, including from the transfer and set index | directory.

Integrated version control system

Webstorm supports the most popular version control systems:

• Subversion

• Mercurial

• Git

• Perforce

• Cvs

• Tfs

So far, we've probably learned some of the most exciting features Webstorm has to offer. But these are just the tip of the iceberg. If you want to have more experience, don't let yourself download a try.

Official:

Http://www.jetbrains.com/webstorm/download/index.html

Webstorm functional Characteristics and User Guide