Available in products
All of its features, including code completion, error highlighting and refactoring, quick-fixes and intention actions, are focused on developer productivity:
Extended Frameworks Support
Some specific features include:
- Code completion for every framework
- JSDoc and DoJo style type annotations support for better code completion and parameter type information
- Quick Documentation lookup for JSDoc and DoJo style commands
Here is a simple string...
But once we add '<' inside it, it becomes a superstring more than just a string. Just press Ctrl+Space⌃Space, to see the difference. Yes, you get all HTML code assistance inside a JS literal!
Of course you can complete tag attributes...
and do other things you do when you code HTML...
ECMAScript Harmony Support
- code navigation and completion
- rename refactoring
- syntax highlighting
- error checking
- find usages
Testing & Debugging
Debug Applications Directly in Firefox
The IDE automatically installs plugin for Mozilla Firefox and executes the configuration.
- Customizable breakpoint properties: suspend mode, conditions, pass count and more
- Frames, variables and watches views
Note: it's bundled in WebStorm JavaScrit IDE. Users of PhpStorm, as well as other JetBrains IDE — IntelliJ IDEA, PyCharm, RubyMine, and AppCode — should install it from the plugin repository following these instructions.
Also IDE has Code coverage for unit testing that provides a clear picture of which parts of your code remain untested.
Look for the colored bar to the left of the source lines (green means performed, while red means omitted):
You can also see test coverage statistics by file and by directory in your Project View:
The editor is aware of CommonJS module structure and suggests proper auto completion options:
Read more about how to configure Node.js in WebStorm.
Search & Navigation
Results are shown in a tree-view, with one-click navigation to the actual usages in source code, or highlighted so that you can view then while browsing the project files.
Goto Declaration / Goto Symbol
Different search patterns are supported, including use of asterisk * and CamelHump abbreviations.
To make your code view clearer to read and understand, the IDE lets you fold certain parts of it. The Code Folding feature collapses blocks of code with a single shortcut Ctrl + NumPad +⌘NumPad+. The folded code can be quickly seen in a popup by positioning the cursor over the grayed dots.
Code Analysis & Refactoring
Rename a file, function, variable, parameter, or label (both directly and via references, even within HTML):
- Rename a file, function, variable, parameter, or label (both directly and via references, even within HTML). Rename for local entities works inline, with no dialogs opened.
- Extract Variable/Function: create a new variable or a function from a selected piece of code.
- Inline Variable/Function: replace a variable usage(s) with its definition, or replace a function call(s) with its body.
- Move/Copy file: you can easily move a .js file to another directory, by simply pressing F6 and specifying its new location. All references to the file throughout your project will be automatically resolved.
Safe Delete file: in case you are trying to delete a .js file that is referenced in other project files,
the IDE will notify you and give you an opportunity to either resolve the inconsistency first or just cancel the operation.
- Extract inlined script from HTML into a JS file.
This refactoring is especially good when you need to reuse, say, an event handler for multiple HTML objects. It lets you extract the inlined script to a separate JS file, and replaces the inlined code with calls to the extracted script.
Code Inspections and Quick-Fixes
...and offers quick-fixes for them.
Wrap/unwrap code statements
But in our IDE you can just invoke Code -> Unwrap/Remove... action (Ctrl+Shift+Delete⌘⇧⌦), which allows to precisely select which construct to unwrap depending on where your caret is. See below for sample screenshots.
What if we unwrap the
if... block from the above screenshot?
Voila! The edited code block is unwrapped and in place! That's really fast.
In addition, the Surround With command (Ctrl+Alt+T⌘⌥T) can be called on a selected block of
if/else block, etc.