HTML/CSS/JavaScript Editor

Note: PhpStorm includes all the features of WebStorm related to HTML, CSS and JavaScript.

DOM-Based, Browser-Specific Completion

JavaScript, HTML & CSS code completion for tags, keywords, labels, variables, parameters and functions is DOM-based and supports the specifics of popular browsers like Firefox and Chrome.

Completion is available for both standard and user-defined functions in *.js files, HTML event handlers, and all other appropriate contexts.

Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, Dart and other cutting-edge web development technologies are supported.

JavaScript Debugger

With JetBrains PhpStorm you can debug JavaScript while taking advantage of the complete range of intelligent 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
  • Unit Testing in JavaScript

Live Edit

Live Editing Preview saves you lots of time and key presses. Open a page in the editor and the browser so you can see both, and activate the Live Edit feature while running a JavaScript debugging session. Start editing the code and see the changes instantly in the browser, even as you are going through the list options in code completion popups.

PhpStorm auto-saves your changes, and the browser smartly updates the page on the fly, showing your edits.

File Watchers

Take advantage of automatic compilation/transpilation of modern web development languages to JavaScript (from CoffeeScript, TypeScript, Dart, etc) or CSS (from Sass, SCSS, Less, Stylus, Compass, etc.) with File Watchers.

High-Speed Coding

The editor allows you to utilize all the power of Emmet (formerly Zen Coding). Define your own abbreviations (snippets) with Live Templates or use pre-defined for PHP, HTML, CSS, JS and other languages.

Validation and Quick-fixes

PhpStorm detects and suggests auto-fixes for, such problems as: missing required attributes, invalid attributes or illegal values, wrong references to files in links, duplicate attributes, invalid CSS selector format, invalid CSS properties, unused CSS class definitions, invalid local anchors and more.

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 JS are: Rename, Extract Variable/Function, Inline Variable/Function, Move/Copy, Safe Delete, Extract embedded script into file.

JSLint/JSHint

JavaScript code quality tools are integrated in the JavaScript editor to check your code just as you edit it. Open Settings, type JSLint/JSHint, enable an inspection and your code will be checked against these inspections as you type.

Node.js

PhpStorm fully supports Node.js with a free plugin available from the repository. It provides code completion, highlighting, navigation, error checking, debugging, managing packages with npm, and more.

ECMAScript Harmony Support

For those who prefer to stay one step ahead, PhpStorm presents support of ECMAScript Harmony. To try out the new features, set ECMAScript Harmony to be the JavaScript language version in the IDE settings.

JavaScript Templates & Web Components Support

PhpStorm supports EJS template engine (syntax highlighting, typing assistance, formatting, etc.), and provides formatting and syntax highlighting for Handlebars and Mustache templates, as well as automatic tag closing.

There is also initial support for Web Components.

Angular support

Angular support in PhpStorm includes code completion and navigation for directives and bindings, and understanding new event attributes, for either TypeScript or ECMAScript 2015.

Flow support

You can use the type annotations that Flow adds to JavaScript. When using annotated functions or methods, you'll get typed parameter info in code completion.

TSLint

PhpStorm provides integration with TSLint, a linter for TypeScript code. Enable it to see warnings and errors from TSLint right in the editor, as you type.

Vue.js

Enjoy coding assistance for Vue template language and the language of your choice in the script and style blocks of a .vue file. The IDE automatically completes Vue components and adds required imports for them.