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:
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