如何在Visual Studio Code中格式化Laravel Blade代码？

Question

如何在Visual Studio Code中格式化Laravel Blade代码？

phplaravelvisual-studio-codelaravel-blade

69

我已经安装了一些Visual Studio Code扩展程序来处理Laravel Blade Code，例如

但它们并不能帮我格式化Laravel Blade Code [blade.php文件]。我的意思是，它们没有像我预期的那样自动缩进代码。但是我在Visual Studio Code IDE中看到过格式良好缩进的刀片代码。

示例：

Laravel的Visual Studio Code环境

有没有特定的配置或技术可以让这些扩展程序正常工作，还是有其他方法？

- coolsaint

14个回答

37

更新您的VS Code。转到“设置>扩展”并启用“Blade Format”复选框。

Enable Blade code format

重启 VS Code 以使更改生效。

Windows 上使用自动格式化快捷键：Shift+Alt+F

- Tausif Raut

3

似乎在2019年11月19日这个方法不起作用了，我也没有启用其他第三方格式化工具。我甚至试着新建一个文档。基本上，如果我给刀片文档格式化，所有行都会左对齐。糟糕。 - scottrod

3

同时重新启动 Visual Studio Code 以使更改生效。 - mukama

16

更新2022：此扩展程序可能已不再维护。

对我来说，这个扩展程序使用以下设置可以完美地进行自动缩进：

"beautify.language": {
        "html": [
            "blade",
            "html"
        ]
    },

- Bedram Tamang

1

你能描述一下如何找到美化扩展设置的选项吗？ - dipenparmar12

1

这个设置片段适用于settings.json。您可以通过选择“首选项>用户设置”到达那里，然后在菜单中显示的任何设置下查找“在settings.json中编辑”的链接。话虽如此，在评论时，除非您实施了@Slivicon发布的代码，否则Beautify无法正确格式化Blade模板。 - jamesfacts

1

此扩展已被弃用，因为它不再得到维护。 - mercury

@mercury 感谢您的帮助，我已经更新了我的答案。 - Bedram Tamang

15

首先安装这个扩展程序，https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade

打开settings.json，添加以下行。

"[blade]": {
    "editor.defaultFormatter": "onecentlin.laravel-blade",
    "editor.formatOnSave": true
}

- Pyae Sone

1

被接受的答案对我没用 - 它仍然试图使用 Prettier，尽管我已将 blade 添加到忽略该语言列表中。然而，这个方法非常有效。 - InanisAtheos

9

Files>Preferences>Settings>Extensions>Blade Configurations

启用格式化 Blade 文件（请参考图片）。然后重新启动 Visual Studio Code。现在使用Shift+Alt+F进行格式化。现在完成。

- Manoj Niroshana

8

这个解决方案在2021年对我有效。

首先，安装Laravel Blade，然后更新您的settings.json文件并添加此部分。

"[blade]": {
  "editor.defaultFormatter": "amirmarmul.laravel-blade-vscode",
  "editor.formatOnSave": true
}

- Joseph

这对我来说很方便使用，而且在2023年仍然有效。 - Hassan Khan

当前的格式化程序不起作用。不得不更改为这个："editor.defaultFormatter": "onecentlin.laravel-blade"。 - lortschi

6

在安装 Laravel Blade Formatter 扩展后，请将以下行添加到您的 VS Code settings.json 文件中：

https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter

"editor.formatOnSave": true,
"[blade]": {
    "editor.defaultFormatter": "shufo.vscode-blade-formatter"
},

- Mouad Tahir

3

我建议在VSCode中使用vscode-blade-formatter插件，该插件支持指令缩进和指令内php代码格式化。

截图

这个插件是基于我之前的项目blade-formatter开发的。我创建这个插件的动机是想通过命令行以正确的缩进格式化Blade文件。

如果你希望对指令进行缩进，请尝试使用这个插件。

- shufo

这看起来不错，但为什么它不在VS Code扩展市场上？ - Lee Colarelli

1

您可以从此处下载扩展程序：https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter - shufo

2

使用 Blade 与任何与 HTML 兼容的扩展一起使用，需要使用 emmet.includeLanguages（Emmet 包含语言）设置。将项目 blade 添加到值为 html 的项中。

    "emmet.includeLanguages": {
        "blade": "html" // Use HTML in Blade files
    },

现在HTML可以在与Blade相关的文件中使用，您可以使用Blade和HTML代码片段以及其他扩展。

- Oleg Dmitrochenko

1

我找到的唯一一个尝试缩进混合了html和blade指令的blade文件的解决方案是由Faizal Nugraha完成的Beautify扩展程序的美化javascript的hack。

编辑：然而，这似乎不支持格式化html

- Tim M.

1

谢谢您发布这个！虽然需要走很长的路才能实现一些简单的格式化，但我认为您的解决方案是实现正确缩进的唯一方法。 - jamesfacts

当然，我不能为这段代码负责，它属于链接gist中的Faizal，但是我发现这是迄今为止最好的解决方案。虽然仍然存在一些限制，但这是我目前找到的最佳解决方案。 - Tim M.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Syed Ekram Uddin · Accepted Answer

首先进入“Visual Studio Code”设置，并搜索选项“files.associations”。如果此选项在您的设置中不可用，请将“Visual Studio Code”更新到最新版本。
在设置的覆盖面板中粘贴以下代码片段

"files.associations": {
    "*.blade.php": "html",
    "*.tpl": "html"
}

它将关联 .blade.php 和 .tpl 文件扩展名到 html 类型

保存即可，祝格式化愉快 :)

更新：在使用 blade 代码格式化 HTML 时仍存在一些问题，格式化器倾向于在执行格式化命令时将 blade 代码放在一行中。但是，如果您的代码变得越来越多，这将不会是一个问题。此外，您可以通过在 Blade 代码块之间添加一行注释来轻松管理这些内容。在代码中进行注释总是一个好习惯。

更新：看起来更新版本添加了一个选项，在用户设置中启用 blade 格式化。为了使用它：

请确保您正在使用最新版本并安装了Laravel Blade Snippets扩展。
然后 Ctrl+Shift+P: 输入 User settings : Enter

3. 在“User settings” > “Extensions” > “Blade Configaration”中勾选“启用格式化 Blade 文件”选项。

就这样。