As you may know, PhpStorm has all the WebStorm features available either out of the box or with free plugins in the repository. Thanks to this, PhpStorm 7 comes with support for .mustache and .hbs files and provides syntax highlighting, code formatting and automatic tag closing for Mustache and Handlebars as well as syntax autocompletion in EJS templates.
There’s also initial support for a new W3C draft: Web Components. With it we can create custom DOM elements and have PhpStorm provide completion and CSS support for them.
Let’s have a quick look at all of these!
Mustache and Handlebars support
We can enable support for Mustache and Handlebars in PhpStorm 7 by adding the Mustache/Handlebars plugin (IDE Settings | Plugins , Install JetBrains plugin…). The IDE will then recognize .mustache and .hbs files and provide us with syntax highlighting and completion. There are even some inspections: our editor will let us know if we’ve made a mistake, for example when we have non-matching blocks:
While working on larger templates, it can be handy to have an overview of the document structure at hand. Using the structure window, we can see the template elements that are used, such as variables, loops and functions. Double-clicking them will bring us to the exact location of the element in the editor:
Web Components Support
Want to see it in action? Here’s an example of what can be done with Web Components.
The editor knows about the new elements available from this draft and will also learn about elements we create ourselves. For example, we can create a <search-widget> element that renders a Twitter Bootstrap-inspired search or extend existing elements and add styling or behaviour. I can see a whole new world of custom HTML elements come to life in the future!
Develop with pleasure!
– JetBrains PhpStorm Team
Subscribe to Blog updates
Thanks, we've got you!
Qodana Clone Finder: Early Access Program
In December 2020, we announced the EAP for Qodana, which is rapidly evolving into a comprehensive platform that allows companies to perform multi-level evaluations of the quality of code they own, contract, or purchase. Qodana helps you detect bugs without relying on an IDE, either on a local machi…
PhpStorm 2020.2 EAP #3
The Early Access Program for PhpStorm 2020.2 is in full swing and today we’ve got the third build of the 2020.2 EAP for you. In this blog post, you can read about improvements for Git installed in WSL2 and Search Everywhere. Download PhpStorm 2020.2 EAP (more…)…
PhpStorm 2019.3.3 Preview
We’ve just rolled out a preview for the third minor update for PhpStorm 2019.3. Please give the PhpStorm 2019.3.3 Preview build 193.6494.5 a try and share your feedback with us. (more…)…
How to Upgrade to PHP 7.4 with PhpStorm
Check out our fresh video with a few nice tips and tricks on how to update your codebase to PHP 7.4. It combines materials from the PhpStorm 2019.2 and PhpStorm 2019.3 releases, with a few cool bonuses to boot. Nikita drew our attention to the fact that setters are slower than assigning prop…