JavaScript Editor

All of its features, including code completion, error highlighting and refactoring, quick-fixes and intention actions, are focused on developer productivity:


Code Completion

JavaScript Code Completion

JavaScript editor completes keywords, labels, variables, parameters and functions, including completion in HTML event handlers.

JavaScript Code Completion Completion JavaScript


JavaScript completion is DOM-based and browser-aware, which is helpful for developing scripts designed to run in multiple browsers.

JavaScript DOM Completion

Code completion is also enhanced with support for the most popular JavaScript frameworks such as JQuery, YUI, Dojo, Prototype, Mootools and Bindows.

Extended Frameworks Support

The following extended JavaScript frameworks are supported: JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo, and Bindows.

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

JavaScript Code Formatting

JavaScript code formatting

Formatting for JavaScript code is supported through customizable settings. This allows to follow almost any coding guide-lines that concern code styles.

Edit HTML inside JavaScript literals

We often need to edit HTML code inside JavaScript literals, and usually this is not a very pleasant task. But not with our IDE!

Here is a simple string...

Edit HTML inside JavaScript literals

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!

Edit HTML inside JavaScript literals

Of course you can complete tag attributes...

Edit HTML inside JavaScript literals

and do other things you do when you code HTML...

Edit HTML inside JavaScript literals

...including code completion, quick documentation, and navigation — for HTML, CSS and even JavaScript inside JavaScript literals.

ECMAScript Harmony Support

For those who prefer to stay one step ahead, WebStorm presents experimental support of a new ongoing ECMAScript version code-named Harmony. To try out new features, set ECMAScript Harmony to be the JavaScript language version in the IDE settings.

Note: each JavaScript engine implementation adds some nice features that others don't have. When you use a language feature that isn't supported by the currently selected JavaScript version, WebStorm will notify you and suggest a Quick-Fix:


Read more in our blog »

CoffeeScript

Keeping pace with the newest technologies coming to the scene, JavaScript Editor offers you CoffeeScript support 'hot off the press'. CoffeeScript is a programming language that compiles to JavaScript and enhances its brevity and readability, while also adding some sophisticated features like array comprehension and pattern matching. WebStorm offers you:

  • code navigation and completion
  • rename refactoring
  • syntax highlighting
  • error checking
  • find usages

CoffeeScript

to the top

Testing & Debugging

JavaScript Error & Syntax Highlighting

The IDE is capable of highlighting JavaScript errors on-the-fly to hunt them far before your application produces an error.

Error highlighting in JavaScript Highlighting escape sequences

Advanced syntax highlighting works fine both in standalone JavaScript (JS files) and embedded HTML JavaScript code.

Debug Applications Directly in Firefox

The IDE supports debugging of JavaScript code in Mozilla Firefox. Just create a JavaScript Debug configuration:

Debug Applications Directly
 in Firefox

The IDE automatically installs plugin for Mozilla Firefox and executes the configuration.

Debugger for JavaScript

Our debugger now supports JavaScript debugging with a complete range of features — watches, conditional breakpoints, dependent breakpoints, expression evaluation, and more.

  • Breakpoints in HTML or JavaScript files
  • Customizable breakpoint properties: suspend mode, conditions, pass count and more
  • Frames, variables and watches views
    javascript debug toolwindow
  • Runtime evaluation of JavaScript expressions
    Evaluate expression
    support

JavaScript Unit Testing

If you're a JavaScript developer, you probably know that the quality and correctness of your application are crucial. Well, consistency and regression testing just got a little less painful. Meet the JsTestDriver! Read more »

JavaScript Unit Testing

JavaScript Unit Testing

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:


Read more in our blog »

to the top

Node.js

WebStorm JavaScript editor allows you to debug and validate your server-side JavaScript — Node.js apps.

Users of PhpStorm, as well as other JetBrains IDE — IntelliJ IDEA, PyCharm, RubyMine, and AppCode — should install it from the plugin repository.

Node.js

The editor is aware of CommonJS module structure and suggests proper auto completion options:

Node.js

Read more about how to configure Node.js in WebStorm.

Search & Navigation

Advanced JavaScript Search and Navigation

The IDE lets you search for JavaScript symbols, labels, files and shows all places in the entire project where the search item is used.

Find usages of label

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.

Highlight usages

Goto Declaration / Goto Symbol

Goto declaration in JavaScript

Navigation to a declaration lets you browse through the functions, variables and labels declared in your JavaScript code. Use the Ctrl + Click⌘Click combination, or position the caret at a symbol usage and press Ctrl + B⌘B. This will immediately navigate you to the line of code where the label is declared.
You can use the Ctrl + Alt + Shift + N⌘⌥N shortcut to navigate through symbols declared in your JavaScript code.

Goto symbol in JavaScript

Goto symbol in JavaScript


Different search patterns are supported, including use of asterisk * and CamelHump abbreviations.

JavaScript structure view

The IDE lets you examine the logical structure of your JavaScript code. The Autoscroll to Source and Autoscroll from Source toolbar buttons keep you synchronized with the editor.

JavaScript Structure view

JavaScript Code Folding

Code folding in JavaScript

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.


 

to the top

Code Analysis & Refactoring

JavaScript 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.
    Safe delete
  • 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

To ensure better code quality, IDE catches common errors in your JavaScript code on the fly...

JavaScript: Code inspection

...and offers quick-fixes for them.

JavaScript: Code inspection and quick-fix

Wrap/unwrap code statements

Sometimes when you are editing JavaScript, you need to remove, e.g. an enclosing if or else statement without touching a current code block. This normally requires going back and forth and deleting something.

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.

Wrap/unwrap code statements

What if we unwrap the if... block from the above screenshot?

After Unwrap in JavaScript

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 JavaScript code, for quickly inserting it into a surrounding construct, like expression parentheses, if/else block, etc.

JSLint/JSHint

JavaScript code quality tools are integrated in the JavaScript editor. Checks your code just as you edit it. Open Settings, type JSLint/JSHint, enable an inspection and here you go:

JSLint/JSHint

to the top