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

【问题标题】：How to reformat HTML code in JavaScript file in PhpStorm如何在 PhpStorm 中重新格式化 JavaScript 文件中的 HTML 代码
【发布时间】：2017-06-18 01:05:10
【问题描述】：

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

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

如何重新格式化 JavaScript 和 HTML？

【问题讨论】：

尝试 Ctrl+A 全选。然后 Ctrl+Alt+L 格式化
已经试过了，还是不行。谢谢
Alt+Enter 在 HTML 部分有插入符号并从出现的菜单中选择 Edit Fragment（或类似名称的条目）。然后，您可以在单独的拆分中调用 Reformat。一旦完成 - 只需关闭它（那个拆分）。
也试过了，还是不行，谢谢

标签： javascript html phpstorm reformatting

【解决方案1】：

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

将光标放在您的 HTML 代码片段上。
按 ALT + ENTER 键并单击“编辑 HTML 片段”
在片段编辑器中重新格式化您的 html 代码。
您的 Javascript 文件已直接更新。

【讨论】：

【解决方案2】：

2016.2 不支持格式化在 Typescript/ECMAScript 6 中注入的 HTML。此功能 (WEB-18307) 自 2017.1 起可用，请参阅 https://www.jetbrains.com/help/webstorm/2017.1/using-language-injections.html#d240474e440

【讨论】：

【解决方案3】：

查看代码样式选项：

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

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

您的 JavaScript 对象的“模板”使用 '（单引号）来打开看起来像多行字符串的内容。第 49 行似乎有另一个单引号可能会弄乱检查员。

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

将 HTML 复制到单独的 .HTML 文件中
在那里重新格式化 HTML
复制重新格式化的 HTML
返回对象的字符串值（模板）
write: template: ' '
粘贴。 PHPStorm 应该会自动为您转义引号

【讨论】：

感谢@Roberto 为您设置 HTML 代码样式，他非常适合我。但在我的用例中，PhpStorm 2016 无法在 Javascript 文件中格式化 HTML 代码。从 PhpStorm 2017 开始就有可能。PhpStorm 2016 的另一个解决方案是使用类似于 HTML 文件的“.vue”类型的文件。 Single File Components with vueJS
@Rifton007 我以前没有使用过“vue”文件。谢谢你把这个介绍给我。很高兴您找到了另一个解决方案