PhpStorm

PhpStorm Features — 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 popular browsers' specifics (Firefox, Chrome, etc.).

Completion is available for both standard and user-defined functions in *.js files, HTML event handlers and everywhere else where appropriate.

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

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.


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 running JavaScript debugging session. Start editing the code and see the changes instantly in the browser even while 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.
Watch the demo »

High-Speed Coding

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

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.

JavaScript Debugger

With JetBrains PhpStorm 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
  • Unit Testing in JavaScript

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. Checks 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 the Web Components.


More front-end features »

You can find more front-end features on JavaScript Editor and HTML/CSS Editor pages