Boost your productivity with WebStorm
Intelligent coding assistance
Rely on the IDE to write and navigate around HTML, CSS and preprocessors like Less, Sass and Stylus.
On top of all that, benefit from advanced support for popular frameworks: AngularJS, React, Meteor, and more.
WebStorm analyzes your project to provide the best code completion results for all methods, functions, modules, variables, and classes defined in your application. The same is also available for all language-specific built-in objects.
In HTML code, have all tags auto-completed and use the full power of Emmet abbreviations to raise your productivity.
When working with CSS, enjoy code completion for properties and their values. In Less and Sass, get assistance for mixins.
WebStorm takes code completion for AngularJS apps to the next level as well. Get coding suggestions for default and custom directives, controller and app names, and code insights for data bindings.
With WebStorm's powerful navigation features, get around your code efficiently and save time when working with large projects.
For any method, function or variable in your code, jump to its definition with a simple ⌘-ClickCtrl+Click, or search for its usages.
Search through the whole project for a symbol, file or class name, by using the Search everywhere dialog (⇧⇧Shift+Shift).
Structure view can help you navigate through a currently opened file with ease.
Code quality analysis
WebStorm has hundreds of built-in inspections covering all the supported languages. All errors and warnings are reported right in the editor as you type, with many quick-fix options available.
Any line of code with a possible issue is marked in the right-hand editor gutter, so you can easily spot errors and warnings in a long file.
You can also run code quality analysis for the whole project and automatically apply selected quick-fixes.
Additional integrated code quality tools are also available, such as JSHint, ESLint, JSCS, JSLint, and Google Closure Linter, to report errors and warnings in the editor.
Use a consistent code style, by having WebStorm automatically apply the configured code style as you write code, or by reformatting whole files at once.
Configure your code style for any language, including indents, spaces, aligning rules, and so forth. Save the code style scheme in the project settings and, if you want, share it with your teammates via VCS.
In addition, WebStorm automatically applies the code style specified in the .editorconfig project file.
Multiple carets and selections
WebStorm, too, has everyone's favorite multiple carets and selections. Edit several locations in your file at the same time, and even have code completion and live templates working for that. Select the locations to edit with ^ClickAlt+Click. Or, select the occurrences of the current word and edit them all at the same time.
Debugging, tracing and testing
To make unit testing easier than ever, WebStorm integrates with the Karma test runner and Mocha, providing a simple UI and the ability to debug tests and quickly navigate through test results.
WebStorm provides an advanced debugger for your client-side code for Google Chrome. It's built right into the IDE, so you don't have to switch between the editor and browser for debugging.
Easily debug ECMAScript 6, TypeScript or CoffeeScript code, relying on WebStorm debugger's support for source maps.
The full-featured built-in debugger for Node.js works right out of the box as well. Use it debug apps running locally or on a remote machine.
WebStorm also supports JSTestDriver, Cucumber.js for behavior-driven development, and Nodeunit.
Tracing and profiling
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. These data are also used to power code completion results.
spy-js can also help you visualize the application structure. Use the spy-js diagram to see how project files are connected with function calls based on the runtime data.
WebStorm can help you capture and explore V8 CPU profiles and heap snapshots for Node.js applications. Easily identify any possible hot spots or memory leaks in your app as profiling data are presented in the most accessible way.
Seamless tool integration
WebStorm integrates with popular command line tools for web development, providing you with a productive, streamlined development experience.
Always feel at a home with a single UI for: running tasks with Grunt and Gulp; integration with npm and Bower, JSHint, ESLint and JSCS code quality tools; Cordova integration that allows you to create new mobile apps and run them; and many other scenarios.
Grunt and Gulp
All the tasks defined in your project gruntfile.js or gulpfile.js are now listed in the tool window, and you can run any task with a simple double click.
You can also create a Run/Debug configuration for tasks, and then run or debug them with the familiar Run... or Debug... actions.
npm and Bower
Managing Node.js modules is easy with WebStorm. Right-click on package.json file to run the npm install command. Access the full list of installed local dependencies via Preferences, where you can install new npm modules and update existing modules.
With Bower integration, you can manage your project client-side dependencies in a similar fashion.
Code quality tools
In addition to hundreds of WebStorm's own inspections, in you can use linters like JSHint, ESLint or JSLint. As you type, WebStorm will run these against you code and highlight any issues on the fly, right in the editor.
WebStorm is built on top of the open-source IntelliJ Platform, which we at JetBrains have been developing and perfecting for over 15 years.
As such, WebStorm is tightly integrated with the leading version control systems. It offers the Local History feature, has a vibrant plugin ecosystem, is completely configurable, and has much, much more to offer.
WebStorm provides a unified UI for working with many popular Version Control Systems, ensuring a consistent user experience across git, SVN, Mercurial, and Perforce.
Any uncommitted changes are highlighted in the editor's left gutter and in the Project view. You can easily roll-back any change in just two clicks.
A built-in visual merge tool resolves all conflicts in a quick and intuitive manner.
When working with GitHub, check-out your projects and make pull requests right in the IDE.
Whether you're using VCS or not, Local history can be a real code saver. WebStorm tracks any changes made in 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.
The IDE is extremely customizable. Adjust it to perfectly suit your coding style, from shortcuts and visual themes to tool windows and editor layout.
WebStorm has light and dark appearances that you can choose from. The color schemes can be configured in Preferences per language, or you can find and use one of the popular themes available on the Internet.
Dozens of plugins are available in the IDE Plugin Repository for when you decide to enrich WebStorm with support for new frameworks, integrated tools, and additional productivity features.
To run a command or a command-line tool, don't leave the IDE'use WebStorm's built-in local Terminal, which you can set to the shell of your choice.