JavaScript Editor


Your client-side and server-side JavaScript development will become faster and more efficient with this JavaScript development environment, providing best-in-class coding assistance and a wide range of advanced features.


Node.js, CoffeeScript, TypeScript, Dart and JavaScript testing frameworks are supported via free plugins. With built-in JavaScript and Node.js debugging tools, your debugging experience will be enhanced and streamlined without leaving the IDE.





JavaScript Environment — Coding Assistance

Code Completion

Enjoy smart code autocompletion for JavaScript keywords, variables, methods, functions and parameters!

Completion is available for standard, browser specific and user-defined functions in *.js files. The IDE can also offer you code completion for methods and functions from external libraries and frameworks used in your project:

Code Inspection and Quick-fix Options

The IDE provides complex code quality analysis for your JavaScript code. On-the-fly error detection and quick-fix options will make the development process more efficient and ensure better code quality.

In addition to dozens of built-in inspections, you can use integrated JSLint, JSHint and Google Closure Linter code quality tools:


Code Completion
Code Inspection and Quick-fix Options





Navigation

You can easily navigate around any large project with powerful navigation features.

Fully aware of the structure of your code, the IDE brings you context-based navigation, rather than just a text-based search, to navigate straight to a class, function definition or variable.

With Go to definition and Find usages, you can efficiently browse through functions and variables declarations and their usages in the code. Structure view allows you to quickly navigate through JavaScript file logical structure:

Navigation





Language Mixtures

The IDE effectively handles language mixtures in JavaScript code. Simply start typing HTML code inside JavaScript literals and enjoy HTML code highlighting and completion.

You can also enjoy full coding assistance for JavaScript inside the <script/> tag in HTML:

Code Formatting

The editor highlights the structure of JavaScript code and provides automatic code formatting.

Code styles, for example the indents, can be easily configured in the project settings as well as the color scheme. These settings can be imported or exported to share with the team:


Language Mixtures
Code Formatting





Refactorings

Smart refactorings for JavaScript will help you keep your code clean and safe:

  • Rename a file, function, variable or parameter everywhere in the project.
  • Extract variable or function: create a new variable or a function from a selected piece of code.
  • Inline Variable or Function: replace a variable usage(s) with its definition, or replace a function call(s) with its body.
  • Move/Copy file and Safe Delete file.
  • Extract inlined script from HTML into a JavaScript file.
  • Surround with and Unwrap code statements.
Refactorings





JSDoc

The IDE respects JSDoc in your JavaScript code and provides appropriate code completion suggestions based on it. The editor helps you generate JSDoc blocks for the functions and makes sure JSDoc for your code is up to date:

ECMAScript Harmony Support

JavaScript editor provides support for different versions of JavaScript. You can already select the 6th edition of ECMAScript, code-named Harmony, to be the JavaScript version in the IDE settings. The IDE will provide version-specific code inspections and quick-fixes:


JSDoc
ECMAScript Harmony Support





JavaScript Environment: Debugging and Testing

JavaScript debugging

Advanced JavaScript debugger for Google Chrome and Firefox gives you ultimate control of your code. It’s built right into the IDE, so you don’t have to switch between the editor and browser for debugging.

Debugger features include:

  • Customizable breakpoints in JavaScript with suspend mode and conditions.
  • Frames, variables and watches views.
  • Runtime evaluation of JavaScript expressions.
  • Remote debug.

Moreover, JavaScript debugger for Chrome allows you to debug minified JavaScript, TypeScript and CoffeeScript code with the help of source maps:

JavaScript unit testing

Unit testing is an essential part of the development process that is required to ensure the quality of the project. Integration of popular JavaScript testing frameworks in the IDE makes unit testing much easier.

Select one of Karma test runner, Mocha or JSTestDriver. You’ll be able to run and debug tests right inside the IDE, view results in a nice and visual format, and navigate to the test code.

When using Karma or JSTestDriver you can also have Code coverage reports to have a clear picture of which parts of your code remain untested:


JavaScript debugging
JavaScript unit testing





JavaScript tracing

Spy-js is a powerful built-in tool that makes JavaScript tracing easy. With spy-js you can see the full list of events that triggered code execution, then dig into the stack trace for an event and explore the highlighted trace in the source code.

Spy-js works for websites opened in any browsers on your machine or mobile device. Use it to debug and profile your code and efficiently identify any possible bottlenecks.

JavaScript tracing





Node.js

Node.js plugin makes the IDE perfect for Node.js development. You can efficiently run, debug and test your Node.js code right in the IDE.

Enjoy smart completion for Node.js code (including the require() statements), error detection, refactorings and powerful navigation.

Debugger for Node.js works right out of the box and provides you with advanced features like conditional breakpoints and remote debugging.

Node.js plugin adds integration with the node package manager npm, which allows you to update dependencies and install Node.js modules locally from the IDE:

Node.js





CoffeeScript
CoffeeScript

The IDE provides support for CoffeeScript, a modern programming language that compiles to JavaScript.

The support includes code completion, auto-indenting, syntax highlighting, error checking and navigation. You can set up a predefined File Watcher to automatically compile/transpile your CoffeeScript code to JavaScript and generate source maps required for debugging:






TypeScript

TypeScript is a language developed by Microsoft which adds class-based object oriented programming to JavaScript.

You’ll get full coding assistance for TypeScript, automatic compilation/transpilation to JavaScript code, and debugging. TypeScript support in the IDE also allows you to download TypeScript definition files to get proper code completion:

TypeScript





Dart
Dart

Dart plugin adds support for Google Dart language in the IDE and is recommended by Google’s Dart team.

Dart support includes intelligent coding assistance with automatic completion, on-the-fly error detection, quick-fix options and refactorings. You can debug, run and test your Dart applications right in the IDE.

In addition, Dart plugin helps you to upgrade project dependencies, build project and compile Dart code to JavaScript in one click:






See also: HTML and CSS Support

Check out how WebStorm helps you develop with HTML and CSS.
More info »

Free 30-day trial