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

Question

当我们使用 Twig 或 Swig 标签时，有没有办法在 VSCode 中正确格式化 HTML，比如

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

现在，代码格式化程序会删除这些标记之前和之后的所有换行符。

无法找到合适的扩展名.. 也不是配置内部代码格式化程序的方法。

Answer 1

我遇到了同样的问题并解决了安装这个扩展：

树枝语言

安装它，重新启动编辑器，然后您在 Windows 上可以使用标准ALT + SHIFT + F进行格式化。

希望它有帮助。

Answer 2

与此相关的事情，我是通过在 vs 代码中安装树枝来做到的。 打开 VS Code 并

Ctrl+Shift+X

并获取树枝扩展并安装它。 谢谢。

Answer 3

现在有一种内置的方式； 当您尝试格式化文档时，您会被转发到扩展页面，并会运行针对给定文件格式的格式化搜索。 对于树枝：

category:formatters xml

Twig Language 2似乎是目前最好的格式化程序的首选 VS Code Twig 扩展。

Answer 4

我一直在为此苦苦挣扎，终于找到了一个完全可行的解决方案； 所以想在这里分享。 请按照以下步骤操作，您应该一切顺利：

• 下载 Vs 代码扩展更漂亮的代码格式化<\/a>程序。 密切注意抓住这个Prettier<\/code>包，因为 Visual Studio 提出了几个不同的Prettier<\/code>扩展包。

• 在 Visual Studio 编辑器中，转到Settings<\/code> --> type "format" 直到弹出格式设置，然后选择Prettier Code Formatter - esbenp.prettier-vscode<\/code>作为您的默认格式化程序。 对User<\/code>和Workspace<\/code>选项卡执行此操作，如果不是自动完成的话。

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

• 现在你可以安装旋律插件<\/a>了。 为此，请按照链接存储库的说明进行操作。 请注意，如果您尚未安装yarn<\/code> ，您之前需要通过npm install --global yarn<\/code> 。

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

• .prettierrc<\/code>文件添加到您的项目根目录，其中包含以下内容：

  这定义了上述插件的额外使用。 您可以根据需要调整配置。 您可以将包含其中包的node_modules<\/code>文件夹放入本地项目中，或者根据需要调整路径以适应您的旋律插件在本地计算机上的位置。
  
     
     
     
  
      
      
      
  仅供参考： node_modules<\/code>文件夹由于其大小通常不会上传到项目存储库。 安装节点后，您将自动在本地计算机上获取该node_modules<\/code>文件夹。 然后，当您安装上述软件包时，它应该安装到该node_modules<\/code>文件夹中。
  
      
      
  现在添加来自whatwedo<\/code>的Twig Syntax 高亮<\/a>包。 现在，当您打开 Twig 文件时，VS Code 应该能够识别它们。 通过在 VS Code 中打开一个.twig<\/code>文件并在右下角检查该文件是否被识别为HTML (Twig)<\/code>来验证这一点。 这将另外突出您的 swig 标签。
  
      
      
      
  要验证一切是否正常，您可以通过单击 VS Code 右下角的Prettier<\/code>打开 prettier 终端。 现在将一些树枝内容写入.twig<\/code>文件并触发格式化程序。 如果控制台没有报错，并且控制台提示使用了melody插件进行格式化； 当然，代码已正确格式化； 你可以走了。