How to reformat HTML code in JavaScript file in PhpStorm

Question

I'm using PhpStorm 2016.2 and developing a web application with VueJS.

In PhpStorm I would like reformat HTML code in my JavaScript file. But when I click Code | Reformat Code | Reformat only JavaScript is reformatted.

How to reformat both JavaScript and HTML?

Answer 1

I found another solution to my problem with PhpStorm 2016. Use the Fragment Editor.

1. Place the cursor on your HTML code fragment.
2. Press the ALT + ENTER key and click on "Edit HTML Fragment"
3. Reformat your html code in the fragment editor.
4. Your Javascript file is updated directly.

Answer 2

2016.2不支持格式化在Typescript / ECMAScript 6中注入的HTML格式。此功能（ WEB-18307 ）自2017.1开始提供，请参阅https://www.jetbrains.com/help/webstorm/2017.1/using-language-injections.html ＃d240474e440

Answer 3

Have a look at the Code Style options:

These are my settings and my mixed HTML/JavaScript gets formatted nicely

Also, make sure you are using the necessary escape tags on quotations when needed and that closing braces/semicolons are placed properly before running reformat.

Your JavaScript object's "template" uses a ' (single quote) to open what looks like a multi-line string. There appears to be another single quote on line 49 that may be messing up the inspector.

In the situation that your HTML is in a JavaScript string, it will (correctly) not be formatted. I would recommend doing the following:

1. Copy the HTML into a separate .HTML file
2. Reformat the HTML in there
3. Copy the reformatted HTML
4. Go back to your object's string value (template)
5. write: template: ' ' <-- place your insertion point in between the quotations
6. Paste. PHPStorm should automatically escape the quotations for you