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.
Intelligent 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
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:
- Search everywhere saves your time allowing you to search for everything in your code in one
- 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.
- Surround with and Unwrap code statements.
Debugging and Testing
Debugger features include:
- Frames, variables and watches views.
- Remote debug.
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.
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:
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:
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:
ECMAScript Harmony Support
More Than Code
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.
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.
Smart Duplicated Code Detector
HTML and CSS
Create a new HTML document with <!DOCTYPE HTML> to enable HTML5 support for that file. Suppose we want to use a new <canvas> element. Not only will the IDE recognize your intention while you are typing <ca and suggest adding <canvas>, but even after pressing SpaceSpace it will suggest attributes supported by this HTML5 element:
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
Whenever you see a bulb, hit Alt+Enter⌥Enter to see what WebStorm suggests
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:
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.
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.
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
- syntax highlighting
- automatic compilation to CSS
More on HTML and CSS Editor features.
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...
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:
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.
For Git VCS IDE shows revisions 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.
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.