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.

JavaScript Environment — Coding Assistance

Code Completion

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, ESLint and Google Closure Linter code quality tools:

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:

Language Mixtures

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:

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.

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 6

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

JavaScript Environment: Debugging and Testing

JavaScript debugging

Advanced JavaScript debugger for Google Chrome 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 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 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.

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.

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 manage dependencies from the IDE:

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:

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 IntelliJ IDEA helps you develop with HTML and CSS. More info »