我该如何在Visual Studio Code中将带有HTML标记的PHP文件格式化?

34
我使用 Laravel,所以所有视图都是 .blade.php 文件。由于 PHP 扩展,Visual Studio Code 无法格式化 HTML。我已经删除了文件名中的 "blade" 部分,但仍无法通过 Alt+Shift+F 正确格式化文件。
我也尝试了五个扩展程序,但它们都不能重新格式化文件。
如何在 Visual Studio Code 中格式化 .blade.php 文件?

可能是VSCode格式化PHP/HTML代码命令的重复问题。 - Cees Timmerman
VS Code自带HTML Intellisense,若要使用此插件,请前往主菜单-文件/首选项/设置,然后在用户设置中添加以下内容:"files.associations": {"*blade.php": "html"} 它适用于任何模板扩展名,如twig等。即使不重启VS Code,它也可以立即生效。 - vinsa
9个回答

64

这个扩展Beautify(来自HookyQR)做得非常好。只需将PHP和任何其他文件扩展名添加到配置中即可。就像Nico所说的,这里是一个例子:

  1. 进入用户设置(Ctrl + Shift + P用户设置(UI)或Ctrl + ,(逗号)

  2. 在上面的字段中搜索“Beautify”。然后点击“编辑settings.json”以更改“Beautify:Config”

  3. 对于“html”部分,添加“php”“blade”

    Enter image description here Enter image description here

###用法

您可以直接调用它。按下F1,然后写入Beautify自动完成会给您两个选择,"美化文件""美化选定内容"选择您需要的那个,它就会完成任务。这是一种直接简单的方式

Enter image description here

您还可以添加一个键绑定以拥有键盘快捷方式。以下是如何操作:

  1. Open keybindings.json (go to menu FilePreferencesKeyboard Shortcuts)

  2. Click in the above. Open and edit file keybindings.json

  3. Add the following into the closed brackets, []

    {
           "key": "alt+b",
           "command": "HookyQR.beautify",
           "when": "editorFocus"
    }
    

    Choose any key you want, and make sure you don't override an existing one. Search first in the left side if it exists or not.

    Enter image description here

请注意,所有这些内容都在扩展的描述中有很好的记录。
额外提示:关于blade (针对@Peter Mortensen的澄清)
blade还是blade.php 如果您对设置是blade还是blade.php感到困惑!我会为您澄清!它是blade!那是vscode语言的关键字!
您如何知道?
首先,如果您打开下面的图像列表:

enter image description here

编写 Blade 模板

enter image description here

你可以看到 Laravel Blade (blade)!语言关键字在括号中!blade
那么如何检查呢!
在设置中尝试使用 blade.php

enter image description here

尝试美化

enter image description here

你将会得到一个请求上下文菜单,用于选择语言(html、css、js)!

enter image description here

所以它不起作用!

要真正了解!请重新添加blade!然后它将直接工作和美化!

它与blade的兼容性如何

对此的惊人答案!是尝试一下,亲自体验!

但如果你问我!我会说它像处理html那样有效!它可能太方便了!而且你可能需要修复一些行!这取决于你的期望和风格!

这里有一个例子!我故意弄乱了缩进

enter image description here

以下是美化后的结果:

enter image description here


2
这几乎可以正常工作,但它认为 PHP 标签是 HTML 标签的开头,因此会缩进标签下面的所有内容。 - Brian Leishman
1
我刚刚添加了“blade”,而不是下面@Sam Dan建议的“blade.php”。 - Adrian Smith
1
铅笔图标在哪里? - Jonny
此扩展已被弃用,因为它不再得到维护。 - Mohammad Aghayari
@MohammadAghayari 这个库已经不再维护了,确实是这样 https://github.com/HookyQR/VSCodeBeautify。但它使用的是 js-beautify 库,这个库是 vscode 内部格式化程序所使用的,而且仍在维护中 https://github.com/beautify-web/js-beautify。如果它已经能够很好地工作,那应该没问题了,除非有更好的替代方案。 - Mohamed Allal
显示剩余4条评论

10

Beautify(由HookyQR提供)可以解决这个问题!

很多人在HTML配置中添加了"blade.php"和"php"。但是Beautify无法识别这些手动选择HTML模板。相反,只需将"blade"添加到HTML配置中即可解决所有问题。


我在用户配置中添加了以下内容:"beautify.language": { "js": { "type": [ "javascript", "json", "jsonc" ], "filename": [ ".jshintrc", ".jsbeautifyrc" ] }, "css": [ "css", "scss" ], "html": [ "htm", "html", "blade" ] }, - jmartsch
这是否意味着Blade文件应该以".blade"结尾(而不是".blade.php")? - Peter Mortensen

7
我认为 Beautify(由 HookyQR 开发)可能会有所帮助。只需在其配置的 HTML 部分中添加 'php' 和/或 'blade.php' 以美化 PHP / Blade 视图文件。

对我来说很有效!


关于 "'blade.php'",不应该只是 "'blade'" 吗? - Peter Mortensen
如果没有直接支持Blade文件,为什么它比OP尝试的其他扩展效果更好? - Peter Mortensen

2
如果你想要一个开箱即用的东西,可以在 PHP 文件中添加嵌套 HTML 格式支持,Visual Studio Code 应该已经有了。它使用所有本地设置,如 html.format、保存时格式化等。试试这个扩展Format HTML in PHP。我做这个扩展是因为其他的解决方案让我感到很烦恼,因为它们没有完全工作。

你指的是哪个本地设置? - Jacob Lee

0
我发现了一个名为Format HTML in PHP扩展程序,对我来说非常好用。

1
之前的回答重复了吗? - Peter Mortensen

0

安德鲁·舒尔茨提到了扩展程序:"在PHP中格式化HTML"

这确实是一个很棒的扩展程序,可以用于格式化带有HTML标记的PHP文件。它还可以格式化包含在PHP文件中的JavaScript代码。

此外,好消息!开发人员已经成功地在工作中包含了Laravel blade.php文件。与此同时,我通过在Visual Studio Code中手动从Blade切换到PHP语言,然后使用扩展程序"在PHP中格式化HTML"和Ctrl+Alt+F或右键单击来格式化Laravel blade文件。这对我非常有效。


0

我在PHP中使用格式化HTML,它可以很好地处理同时包含HTML和PHP的文件。但是,它似乎无法格式化“纯”PHP文件,例如类文件。因此,我还安装了Phpfmt,它可以很好地处理纯PHP文件,但会破坏混合内容文件中的缩进。以下是我得到的示例:

<?php
if (!$logged_in) {
    $login_form = 'data-toggle="modal" data-target="#Modal1"';
    $href = '#';
} else {
    $login_form = '';
    $href = 'members';
}
?>

PHP的开头标签与HTML正确对齐。在“支持的转换”下,我看到它说:

AlignPHPCode:   Align PHP code within HTML block.

但是从上面可以看出,它对我不起作用。有什么建议吗?


0

使用 PHP 中的新功能,VSCode 似乎可以美观地格式化和突出显示嵌入式 HTML。(PHP 7.3 在发布该问题后发布),添加了所谓的“heredoc”和“neardoc”字符串。这里有很好的描述:https://andy-carter.com/blog/what-are-php-heredoc-nowdoc

基本上,您可以像这样放置您的 HTML:

[php code.....]
echo
<<<HTML
   <div>
     <h1>This is a headline</h1>
    <p> this is a paragraph. lorem ipsum lorem ipsum blah black </p>
   </div>
HTML;
[^ don't forget the ;  follow with more php if you want]

在屏幕上看起来非常棒。


-1

可以通过使用 ".blade.php" 的 HTML 格式来完成:

  1. 打开命令面板Ctrl + Shift + P(在PC上))
  2. 键入“Preferences:Open Settings (JSON)”(这是为了打开settings.json
  3. 添加
    "files.associations": {
            "*.blade.php": "html",
            "*.tpl": "html"
    },
    

这将把.blade.php文件格式化为HTML,但不会删除Blade片段。


为什么第一个项目要用 *,而第二个项目(.tpl)不需要? - Peter Mortensen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接