使用VS Code，使用Twig或Swig标签格式化HTML代码

Question

在使用Twig或Swig标签时，是否有一种方法可以正确地在VSCode中格式化HTML？

{% if ... %} {%else%} {%endif%} {% for %} {%endfor%} {% include %}, etc...

目前的代码格式化工具会在这些标签前后删除所有换行符。

没有找到适合的扩展程序。也没有办法配置内部的代码格式化工具。

- Cédric NICOLAS

Answer 1

我遇到了同样的问题，并通过安装这个扩展解决了它： Twig Language 安装它，重新启动编辑器，如果你使用的是Windows系统，你可以使用标准的ALT + SHIFT + F格式化代码。

- Masiorama

---

从命令面板中执行“开发人员：重新加载窗口”命令就足够了。即使安装后需要重新加载，该扩展程序也不会提示需要重新加载。 - jave.web

Answer 2

我在这个问题上一直很苦恼，最终找到了一个完全可行的解决方案，所以想在这里分享。按照下面的步骤操作，你应该就可以愉快地使用了：

• 下载 Vs Code 扩展Prettier Code Formatter。请注意，要选择此Prettier包，因为 Visual Studio 提供了几种不同的Prettier扩展包。

• 在 Visual Studio 编辑器中，进入“设置” --> 输入“format”，直到出现格式化设置，然后选择Prettier Code Formatter - esbenp.prettier-vscode作为您的默认格式化程序。如果没有自动完成，请同时在User和Workspace选项卡中执行此操作。

• 接下来，您需要添加melody插件，以使用 Prettier 在 Vs Code 中正确格式化 twig 文件。这实际上是一个 nodejs 包，因此您首先需要安装 Node JS。在安装节点包时可能会遇到权限问题。为了尽量避免这种情况，您可以使用nvm 安装节点。

• 现在，您可以安装melody插件。要这样做，请按照链接仓库的说明进行操作。请注意，如果尚未安装yarn，则需要通过npm install --global yarn进行安装。

• 为了在 github 存储库/项目中保存特定于项目的格式设置，您可以添加一个.vscode/settings.json文件，其中包含您当前在项目中使用的一般 prettier 配置。这对于在开发人员/存储库之间共享 prettier 格式设置非常有用。

• 还需要在项目的根目录下添加.prettierrc文件，并添加以下内容：

{
  "printWidth": 80,
  "tabWidth": 4,
  "plugins": ["./node_modules/prettier-plugin-twig-melody"]
}

这定义了上述插件的附加使用。您可以根据需要调整配置。您可以将包含该软件包的 node_modules 文件夹放入本地项目中，也可以根据需要将路径调整为本地计算机上的“旋律”插件所在位置。

• FYI: 由于尺寸原因，node_modules 文件夹通常不会上传到项目仓库中。安装 Node 后，您将自动在本地计算机上获得该 node_modules 文件夹。当您安装上述软件包时，它应该被安装到该 node_modules 文件夹中。

• 现在从 whatwedo 添加 Twig 语法高亮 软件包。现在，VS Code 应该在您打开 Twig 文件时识别它们。通过在 VS Code 中打开一个 .twig 文件并检查底部右侧来验证此操作，确认文件被识别为 HTML (Twig)。这将额外突出显示您的 Swig 标记。

• 为了验证一切都正常工作，您可以通过单击 VS Code 底部右侧的 Prettier 打开 prettier 终端。现在，在 .twig 文件中编写一些 Twig 内容并触发格式化器。如果控制台未报告任何错误，并且控制台通知正在使用“旋律”插件进行格式化；当然，代码已经被正确格式化；那么您就可以开始使用了。

- DevelJoe

---

在我的 settings.json 中添加了 "prettier.documentSelectors": ["**/*.twig"]，然后 Prettier 才成为格式化 twig 文件的选项 :) - Meg Claypool

Trivago Prettier Melody 插件已经被放弃一段时间了。如果有人偶然发现了替代方案，请告诉我！ - darylknight

它仍然可以正常工作。 - DevelJoe

Answer 3

现在有一种内置的方法；当您尝试格式化文档时，您将被转到扩展页面并搜索给定文件格式的格式化程序。对于Twig：

category:formatters twig

"

Twig Language 2 看起来是目前最好的 VS Code Twig 扩展，具有最佳的格式化工具。"

- wp78de

Answer 4

有关此事，我通过在 VS Code 中安装 Twig 完成了它。 打开 VS Code 并

Ctrl+Shift+X

获取Twig扩展并安装它。谢谢。

- Y. Joy Ch. Singha