如何在 PhpStorm 中重新格式化 JavaScript 文件中的 HTML 代码

Question

我正在使用 PhpStorm 2016.2 并使用 VueJS 开发 Web 应用程序。

在 PhpStorm 中，我想重新格式化 JavaScript 文件中的 HTML 代码。但是当我点击 Code | Reformat 时，只有 JavaScript 被重新格式化。

如何重新格式化 JavaScript 和 HTML？

Answer 1

2016.2 不支持在 Typescript/ECMAScript 6 中注入的格式化 HTML。 此功能（WEB-18307) is available since 2017.1, see https://www.jetbrains.com/help/webstorm/2017.1/using-language-injections.html#d240474e440

Answer 2

查看代码样式选项：

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

此外，请确保在需要时在引号上使用必要的转义标记，并且在 运行 重新格式化之前正确放置结束 braces/semicolons。

您的 JavaScript 对象的 "template" 使用 '（单引号）打开看起来像多行字符串的内容。第 49 行似乎还有另一个单引号可能会混淆检查员。

如果您的 HTML 在 JavaScript 字符串中，它将（正确地）不被格式化。我建议您执行以下操作：

1. 将 HTML 复制到单独的 .HTML 文件中
2. 重新格式化其中的 HTML
3. 复制重新格式化的 HTML
4. 返回对象的字符串值（模板）
5. write: template: ' ' <-- 将您的插入点放在引号之间
6. 粘贴。 PHPStorm 应该会自动为您转义引号

Answer 3

我找到了另一个解决 PhpStorm 2016 问题的方法。 使用片段编辑器。

1. 将光标放在您的 HTML 代码片段上。
2. 按 ALT + ENTER 键并单击 "Edit HTML Fragment"
3. 在片段编辑器中重新格式化您的 html 代码。
4. 您的 Javascript 文件直接更新。