Web Coding Made Smarter
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.
DOM-Based, Browser-Specific Completion
popular browsers specifics (IE, Firefox, etc.) The completion is available for both standard and user-defined
*.js files, HTML event handlers and everywhere else where appropriate.
Code Navigation and Usages Search
Numerous code navigation and usage search options:
Go to declaration — navigates to where the function, variable or label in question is
declared with a simple hotkey or Ctrl + Click⌘Click.
- Go to
symbol — navigates to any symbol in project code using search patterns, including asterisk (*) or
ECMAScript Harmony Support
CoffeeScript & TypeScript
- code navigation and completion
- rename refactoring
- syntax highlighting
- error checking
- find usages
- automatic compilation/transpilation
- debugging with sourcemaps
Read more about TypeScript support in WebStorm.
The editor is aware of CommonJS module structure and suggests proper auto completion options:
Read more about how to configure Node.js in WebStorm.
*.js files are:
- Safe Delete
- Extract embedded script into file
- Extract Variable/Function
- Inline Variable/Function
WebStorm has Code coverage for unit testing that provides a clear picture of which parts of your code remain untested (when you are using Karma, istanbul code coverage tool is used).
Look for the colored bar to the left of the source lines (green means performed, while red means omitted):
You can also see test coverage statistics by file and by directory in your Project View:
Code Inspections and Quick-Fixes
…and offers quick-fixes for them.
- Customizable breakpoint properties: suspend mode, conditions, pass count and more
- Elements tab (Google Chrome only)
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
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:
Just press Ctrl+Space⌃Space, and the IDE will suggest all possible autocompletion options.
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/XHTML/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 wizard, Node.js Boilerplate 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.