在使用Twig或Swig标签时,是否有一种方法可以正确地在VSCode中格式化HTML?
{% if ... %} {%else%} {%endif%} {% for %} {%endfor%} {% include %}, etc...
目前的代码格式化工具会在这些标签前后删除所有换行符。
没有找到适合的扩展程序。也没有办法配置内部的代码格式化工具。
在使用Twig或Swig标签时,是否有一种方法可以正确地在VSCode中格式化HTML?
{% if ... %} {%else%} {%endif%} {% for %} {%endfor%} {% include %}, etc...
目前的代码格式化工具会在这些标签前后删除所有换行符。
没有找到适合的扩展程序。也没有办法配置内部的代码格式化工具。
我在这个问题上一直很苦恼,最终找到了一个完全可行的解决方案,所以想在这里分享。按照下面的步骤操作,你应该就可以愉快地使用了:
下载 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 内容并触发格式化器。如果控制台未报告任何错误,并且控制台通知正在使用“旋律”插件进行格式化;当然,代码已经被正确格式化;那么您就可以开始使用了。
category:formatters twig
"Twig Language 2 看起来是目前最好的 VS Code Twig 扩展,具有最佳的格式化工具。"
有关此事,我通过在 VS Code 中安装 Twig 完成了它。 打开 VS Code 并
Ctrl+Shift+X