3

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 only JavaScript is reformatted.

How to reformat both JavaScript and HTML?

HTML code in a JavaScript file is not reformatted by PhpStorm

Improve this question
4
  • try Ctrl+A to select all. Then Ctrl+Alt+L to format Commented Jun 18, 2017 at 1:06
  • Already tried, it does not work.Thank Commented Jun 18, 2017 at 1:43
  • 1
    Alt+Enter while having caret on HTML part and choose Edit Fragment (or similarly named entry) from appeared menu. You can then invoke Reformat in separate split. Once done -- just close it (that split). Commented Jun 18, 2017 at 9:53
  • Also tried, it does not work, Thank. Commented Jun 18, 2017 at 22:00

3 Answers 3

Reset to default
9

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

2016.2 doesn't support formatting HTML injected in Typescript/ECMAScript 6. This feature (WEB-18307) is available since 2017.1, see https://www.jetbrains.com/help/webstorm/2017.1/using-language-injections.html#d240474e440

Improve this answer

Comments

0

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
Improve this answer

2 Comments

Thanks @Roberto for your settings of HTML code style, he is perfect for me. But in my use case, PhpStorm 2016 is not able to format a HTML code in Javascript files. It is possible since PhpStorm 2017. A other solution with PhpStorm 2016 is to use files of type ".vue" that look like of HTML file. Single File Components with vueJS
@Rifton007 I have not used "vue" files before. Thank you for introducing this to me. Happy you found another solution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.