Note: PhpStorm includes all the features of WebStorm related to HTML, CSS and JavaScript.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 in PhpStorm includes code completion and navigation for directives and bindings, and understanding new event attributes, for either TypeScript or ECMAScript 2015.
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.
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.
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.