JavaScript Editor

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

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

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

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

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

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

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

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

Keeping pace with the newest technologies coming to the scene, JavaScript Editor offers you CoffeScript support 'hot of 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

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

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

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

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

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
  
• Runtime evaluation of JavaScript expressions
  

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 »

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 »

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.

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

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

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

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.

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.

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

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.

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.

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.

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

...and offers quick-fixes for them.

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.

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

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: