WebStorm — The smartest JavaScript IDE

Standard

Create great web sites in a great IDE. The best JavaScript IDE and HTML editor is at your fingertips.

Check other WebStorm features

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.

JavaScript

DOM-Based, Browser-Specific Completion

JavaScript code completion for keywords, labels, variables, parameters and functions is DOM-based and supports popular browsers specifics (IE, Firefox, etc.) The completion is available for both standard and user-defined functions in *.js files, HTML event handlers and everywhere else where appropriate.

JavaScript: code completion

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.
    JavaScript: Go to declaration
  • Go to symbol — navigates to any symbol in project code using search patterns, including asterisk (*) or CamelHump abbreviations.
    JavaScript: Go to symbol
  • Find/Highlight Usages — locates other places in your entire project where a JavaScript symbol, label or file is used, with quick preview and instant navigation to the actual usages.

ECMAScript Harmony Support

For those who prefer to stay one step ahead, WebStorm presents experimental support of a new ongoing ECMAScript version code-named Harmony. To try out new features, set ECMAScript Harmony to be the JavaScript language version in the IDE settings.

Note: each JavaScript engine implementation adds some nice features that others don’t have. When you use a language feature that isn’t supported by the currently selected JavaScript version, WebStorm will notify you and suggest a Quick-Fix:

ECMAScript Harmony Support

Read more in our blog »

CoffeeScript & TypeScript

Keeping pace with the newest technologies coming to the scene, WebStorm offers you CoffeeScript support ‘hot off the press’. CoffeeScript is a programming language that compiles to JavaScript and enhances its brevity and readability, while also adding some sophisticated features like array comprehension and pattern matching. WebStorm offers you:

  • 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.

Node.js

WebStorm allows you to debug and validate your server-side JavaScript — Node.js apps.

The editor is aware of CommonJS module structure and suggests proper auto completion options:

Node.js

Read more about how to configure Node.js in WebStorm.

JavaScript Refactoring

Refactoring capabilities provided for JavaScript allow you to easily modify the code structure as well as undo the modifications. Some refactorings available for JavaScript code and *.js files are:

  • Move/Copy
  • Safe Delete
  • Extract embedded script into file
  • Rename
  • Extract Variable/Function
  • Inline Variable/Function

JavaScript Unit Testing

If you’re a JavaScript developer, you probably know that the quality and correctness of your application are crucial. Well, consistency and regression testing just got a little less painful. Meet the JsTestDriver plugin. Read more »

JavaScript Unit Testing
JavaScript Unit Testing

Also WebStorm has Code coverage for unit testing that provides a clear picture of which parts of your code remain untested.

Look for the colored bar to the left of the source lines (green means performed, while red means omitted):

Editor Covered Lines

You can also see test coverage statistics by file and by directory in your Project View:

Project View Coverage

Read more in our blog »

Code Inspections and Quick-Fixes

To ensure better code quality, JetBrains WebStorm catches common errors in your JavaScript code on the fly…

JavaScript: Code inspection

…and offers quick-fixes for them.

JavaScript: Code inspection and quick-fix

JSLint/JSHint

JavaScript code quality tools are integrated in the JavaScript editor. Checks your code just as you edit it. Open Settings, type JSLint/JSHint, enable an inspection and here you go:

JSLint/JSHint

JavaScript Debugger Based on Mozilla

With JetBrains WebStorm you can debug JavaScript code utilizing the complete range of features:

  • Breakpoints in HTML and JavaScript
  • Customizable breakpoint properties: suspend mode, conditions, pass count and more
  • Frames, variables and watches views in JavaScript debugger UI
  • Runtime evaluation of JavaScript expressions
JavaScript: Breakpoint

More Than Code

Batch Code Analysis

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

Batch code analysis

Language Mixing/Injection

Support for any “outer” and “inner” language in your code — enjoy full coding assistance for CSS, HTML, SQL, 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.

WebStorm: 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/HTML5/CSS

HTML5 Support

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 Space it will suggest attributes supported by this HTML5 element:

Canvas attributes

IDE also understands your code and the type of each element, so it will be able to help you with a new JavaScript API and show the methods supported by the new HTML5 element:

Canvas JavaScript API

Just press Ctrl+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
HTML: Validation inspections HTML: Validation inspections and quick-fix

Whenever you see a bulb, hit Alt+Enter to see what WebStorm suggests

CSS: validation inspections
CSS: validation inspections

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

More on HTML/XHTML/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 Kickstrap
  • server-side — Node.js Express application wizard.

Just select the project type via File | New Project…

New Project Dialog

Read more in our blog »

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.

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.

About these ads

2 responses »

  1. This is a really good tip particularly to those new to the blogosphere.
    Simple but very precise info… Thank you for sharing this one.
    A must read post!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s