The Complete IDE for JavaScript Development

We've collected some of the most exciting features that the WebStorm IDE provide. Just the top of the iceberg. Read the sections below, scan the screenshots and download the product to try it in action.

JavaScript editor

Intelligent 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:

JavaScript code completion

Code Inspection and Quick-fix Options

WebStorm 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:

JavaScript: quick-fix options

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

Code Navigation and Usages Search

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

  • With Go to definition and Find usages, you can efficiently browse through functions and variables declarations and their usages in the code:
    JavaScript: go to declaration
  • Structure view allows you to quickly navigate through JavaScript file logical structure.
  • Search everywhere saves your time allowing you to search for everything in your code in one search input:
    Search everywhere

Code Refactoring

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.


Debugging and Testing

Powerful JavaScript Debugger

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:

JavaScript debugger

Debugger features include:

  • Customizable breakpoints in JavaScript with suspend mode and conditions.
  • Frames, variables and watches views.
  • Runtime evaluation of JavaScript expressions.
  • Live JavaScript console.
  • 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

Integration of popular JavaScript testing frameworks in the IDE makes unit testing much easier. Select Karma test runner or JSTestDriver for your client-side JavaScript code or Mocha for testing Node.js. 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:

JavaScript testing

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.



Node.js

WebStorm is a powerful tool for web development with Node.js. Enjoy smart completion for Node.js code (including the require() statements), error detection, refactorings and powerful navigation:

Node.js code completion

Debugger for Node.js works right out of the box and provides you with advanced features like conditional breakpoints and remote debugging. You could also debug applications that run remotely:

Node.js debugger


Modern Languages

TypeScript Support

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 support

CoffeeScript Support

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:

CoffeeScript support

Dart Support

Dart plugin adds support for Google Dart language in the IDE and is recommended by the 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:

Dart code completion

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

ECMAScript Harmony Support

WebStorm 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:

ECMAScript Harmony Support


More Than Code

Code Inspection

No need to click through all the files or deploy to a server to spot errors and warnings. Start Code Inspection for the whole source tree, select Inspections to run, and see all results in a single view.

Code inspection

Language Mixing/Injection

Support for any "outer" and "inner" language in your code — enjoy full coding assistance for CSS, HTML, etc. outside of JavaScript code blocks or inside JavaScript string literals.

Language Mixing

Spellchecker

Integrated spellchecker verifies texts in tags, code strings, comments to avoid misspellings and typos on your web pages.

To ensure a better code readability even variable names, CSS classes and IDs are spell-checked. To configure spellchecker specify the options for 'Spelling' inspection in Inspections settings.

Spelling checker

Smart Duplicated Code Detector

For JavaScript and even for CSS and HTML. Go to Code | Locate Duplicates to start your quest against copy/paste coding. You'll be presented with a list of candidates for refactoring — and with the help of Refactor | Extract Method it's easy to keep your code DRY.



HTML and CSS

HTML5 and CSS3 Support

The IDE provides smart code auto-completion for HTML tags, attributes and classes and CSS properties and values including HTML5- and CSS3-specific ones. Coding assistance works for language mixtures, for example, for inline styles in HTML. The editor is also aware of project files and provides suggestions for file references:

HTML and CSS code completion

Validation and Quick-Fixes

WebStorm detects and suggests auto-fixes for such problems as:

  • invalid CSS selector format
  • invalid CSS properties
  • unused CSS class definitions
  • invalid local anchors and more...
  • missing required attributes
  • invalid attributes or illegal values
  • wrong references to files in links
  • duplicate attributes
Dublicate attribute in CSS

Zen Coding & Emmet

WebStorm allows you to use the power and speed of Zen coding and Emmet. All abbreviations are available for creating new content and for wrapping an existing structure. Type div.feature>h4+p, press TAB and you’ll get

<div class="feature">
    <h4></h4>
    <p></p>
</div>

Emmet takes the snippets idea to a whole new level:

CSS: Show content

Show Content

Quick Definition Lookup on a CSS ID immediately shows a popup displaying the actual styles defined for this particular ID; when invoked on an image file reference, you will see an image preview.

This works both in code and in completions lists.

CSS: Show content

Show Applied Styles

Puzzled to understand where the styles come from for a particular tag in your page? Right-click it and choose Show Applied Styles for Tag.

This command opens a tree-view of all styles that are applied to the tag by CSS, with all possibles overrides.

CSS: Show applied styles for tag

Less, Sass and Stylus

WebStorm makes it easier for you to work with modern languages that compile to CSS like Less and Sass. You can enjoy code insights, automatic compilation to CSS, structure view and much more.

WebStorm also comes with basic support for Stylus stylesheet language. Here’s what’s available:

  • code completion
  • formatting
  • syntax highlighting
  • automatic compilation to CSS
CSS: Stylus support

More on HTML and CSS Editor features.



Smart Environment

HTML5 Boilerplate and other Web Application Templates

When you're creating a new project, it makes sense to begin with an appropriate starting template. WebStorm offers some well-known project templates to use depending on your needs:

  • Client-side — HTML5 Boilerplate, Twitter Bootstrap and Foundation
  • Server-side — Node.js Express Application and Dart Web Application.

Just select the project type via File | New Project...

New Project Dialog

FTP and Remote Files Syncronization

Open files from a remote host, FTP, or a mounted network drive using simple configuration and an intuitive user interface.

Edit project files locally and deploy back to remote server using automatic synchronization on file save or on demand.

Mark directories in web server configuration to exclude/include from transfer and from indexing in Settings | Directories.

Version Control Systems Integration

WebStorm supports most popular Version Control Systems:

  • Subversion
  • Mercurial
  • Git
  • Perforce
  • CVS
  • TFS

All the tedious tasks (adding, removing, deleting files) are performed automatically. A built-in visual merge tool resolves all conflicts in a quick and intuitive manner. The changes made locally are highlighted as you type in the editor gutter, providing intuitive navigation and a 2-click rollback for individual changes.

VCS: Changes gutter

For Git VCS IDE shows revisions graph.

VCS Graph

Following features are available no matter what VCS you use:

  • Integrated changelists — group your changes into multiple change lists for better organisation
  • Shelved changes — set aside some changes to restore them later on
  • Repository Changes view — see what has been committed by other team members
  • Incoming Changes view — see the code changes not yet integrated into your local copy.
  • Outdated Changes Notification — get warned that a file you are working with has been changed after your last sync.

Local History

WebStorm tracks any changes made to your source files, protecting you from any accidental losses or modifications, even if made by other applications. At any time you can inspect the history of either a particular file or directory and rollback to any of its previous versions. You can also set version labels.