php 如何在 Visual Studio Code 中格式化 Laravel Blade 代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46268211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Format Laravel Blade Codes in Visual Studio Code?
提问by coolsaint
I have installed some Visual Studio Code extensions to handle Laravel Blade Codes like
我已经安装了一些 Visual Studio Code 扩展来处理 Laravel Blade 代码，比如
laravel-blade[ https://marketplace.visualstudio.com/items?itemName=KTamas.laravel-blade]
laravel-blade[ https://marketplace.visualstudio.com/items?itemName=KTamas.laravel-blade]
Laravel Blade Snippets[ https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade]
Laravel Blade 片段[ https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade]
But they are not helping me to format Laravel Blade Codes [blade.php files]. I mean they are not auto indenting the codes as I expected. But I have seen blade codes online which are well indented in visual studio Code IDE.
但他们并没有帮助我格式化 Laravel Blade 代码 [blade.php 文件]。我的意思是他们没有像我预期的那样自动缩进代码。但是我在网上看到过刀片代码，它们在 Visual Studio Code IDE 中缩进得很好。
Example :
例子 ：
https://medium.com/@ardanirohman/laravel-%EF%B8%8F-visual-studio-code-debug-environment-65440274d3b0
https://medium.com/@ardanirohman/laravel-%EF%B8%8F-visual-studio-code-debug-environment-65440274d3b0
Is their any specific configuration or technique which I can use to make these extensions work or there is some other way? Thanks in advance
他们是否有任何特定的配置或技术可以用来使这些扩展工作，或者还有其他方法吗？提前致谢
回答by Syed Ekram Uddin
First go to "Visual Studio Code" Settingsand search for the option "files.associations" If that option is not available in your settings. Please update your Visual Studio Code to latest version.
In the settings overwrite panel past the following snippet
"files.associations": { ".blade.php": "html", ".tpl": "html" }
首先转到“Visual Studio Code”设置并搜索选项“ files.associations”如果该选项在您的设置中不可用。请将您的 Visual Studio Code 更新到最新版本。
在设置覆盖面板中，通过以下代码段
“files.associations”：{“. blade.php”：“html”，“.tpl”：“html”}
It'll associate .blade.php and .tpl file extensions for html type
它会将 .blade.php 和 .tpl 文件扩展名关联到 html 类型
Save it and your are good to go. Happy formatting :)
保存它，你就可以开始了。快乐格式化:)
Update:There are still some issues in formatting html with blade code, the formatter tend to bring blade codes in a single line while executing format command. However, if your codes grow that's won't be a problem. Moreover, you can easily manage those by putting a line comment in between your blade blocks. And commenting in code is always a good thing.
更新：使用刀片代码格式化 html 仍然存在一些问题，格式化程序在执行格式命令时倾向于将刀片代码放在一行中。但是，如果您的代码增长，那将不是问题。此外，您可以通过在刀片块之间添加行注释来轻松管理这些。在代码中注释总是一件好事。
Update:Seems updated version adds an option to enable blade formatting in the user settings. To use that,
更新：似乎更新版本添加了一个选项以在用户设置中启用刀片格式。要使用它，
Please make sure you are using the latest version and "Laravel Blade Snippets" Extension installed.
Then Ctrl+Shift+P: type User settings: Enter
请确保您使用的是最新版本并安装了“ Laravel Blade Snippets”扩展。
然后Ctrl+ Shift+ P：类型用户设置：Enter
3. In "User settings" > "Extensions" > "Blade Configaration" check the option Enable format blade file.
3. 在“用户设置”>“扩展”>“刀片配置”中勾选启用格式刀片文件选项。
That's it.
就是这样。
回答by Tausif Raut
Update your VSCode. Go to Settings>Extensionsand Enable Blade Formatcheckbox. Use Shortcut for Window: Shift+Alt+F:
更新你的 VSCode。转到设置>扩展并启用刀片格式复选框。使用快捷键的窗口：Shift+ Alt+ F：
回答by Bedram Tamang
回答by Manoj Niroshana
回答by Pyae Sone
First install this extension, https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade
首先安装这个扩展，https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade
Open settings.json.
Add this lines.
打开settings.json。添加此行。
"[blade]": {
"editor.defaultFormatter": "onecentlin.laravel-blade",
"editor.formatOnSave": true
}
回答by Slivicon
The only solution I've found that will actually attempt to indent blade directives mixed with html in a blade file is a hack for the beautifier javascript from the Beautify extension, done by Faizal Nugraha.
我发现实际上会尝试在刀片文件中缩进与 html 混合的刀片指令的唯一解决方案是对 Beautify 扩展中的美化器 javascript 的一种黑客攻击，由 Faizal Nugraha 完成。
Edit:This doesn't appear to support formatting of blade directives inside an html <script>tag, though. Beautify seems to format that as JavaScript.
编辑：不过，这似乎不支持 html<script>标签内的刀片指令格式。Beautify 似乎将其格式化为 JavaScript。
- Install the Beautifyextension
- Edit
~/.vscode/extensions/hookyqr.beautify-1.5.0/node_modules/js-beautify/js/src/html/beautifier.js(Linux/MacOS) or%USERPROFILE%\.vscode\extensions\hookyqr.beautify-1.5.0\node_modules\js-beautify\js\src\html\beautifier.js(Windows) and do the following: - Look for the function
Beautifier.prototype.beautify = function(). - Inside the function look for the line
var source_text = this._source_text; - After that line, paste in:
- 安装美化扩展
- 编辑
~/.vscode/extensions/hookyqr.beautify-1.5.0/node_modules/js-beautify/js/src/html/beautifier.js(Linux/MacOS) 或%USERPROFILE%\.vscode\extensions\hookyqr.beautify-1.5.0\node_modules\js-beautify\js\src\html\beautifier.js(Windows) 并执行以下操作： - 寻找函数
Beautifier.prototype.beautify = function()。 - 在函数内部查找该行
var source_text = this._source_text; - 在该行之后，粘贴：
// BEGIN blade-1of2
source_text = source_text.replace(/\{\{(--)?((?:(?!(--)?\}\}).)+)(--)?\}\}/g, function(m, ds, c, dh, de) {
if (c) {
c = c.replace(/(^[ \t]*|[ \t]*$)/g, '');
c = c.replace(/'/g, ''');
c = c.replace(/"/g, '"');
c = encodeURIComponent(c);
}
return "{{" + (ds ? ds : "") + c + (de ? de : "") + "}}";
});
source_text = source_text.replace(/^[ \t]*@([a-z]+)([^\n]*)$/gim, function(m, d, c) {
if (c) {
c = c.replace(/'/g, ''');
c = c.replace(/"/g, '"');
c = "|" + encodeURIComponent(c);
}
switch (d) {
case 'break':
case 'case':
case 'continue':
case 'default':
case 'empty':
case 'endsection':
case 'else':
case 'elseif':
case 'extends':
case 'csrf':
case 'include':
case 'json':
case 'method':
case 'parent':
case 'section':
case 'stack':
case 'yield':
return "<blade " + d + c + "/>";
default:
if (d.startsWith('end')) {
return "</blade " + d + c + ">";
} else {
return "<blade " + d + c + ">";
}
}
});
// END blade-1of2
- Look for the line
var sweet_code = printer._output.get_code(eol); - After that line, paste in:
- 寻找线
var sweet_code = printer._output.get_code(eol); - 在该行之后，粘贴：
// BEGIN blade-2of2
sweet_code = sweet_code.replace(/^([ \t]*)<\/?blade ([a-z]+)\|?([^>\/]+)?\/?>$/gim, function toDirective(m, s, d, c) {
if (c) {
c = decodeURIComponent(c);
c = c.replace(/'/g, "'");
c = c.replace(/"/g, '"');
c = c.replace(/^[ \t]*/g, '');
} else {
c = "";
}
if (!s) {
s = "";
}
switch (d) {
case 'else':
case 'elseif':
case 'empty':
s = s.replace(printer._output.__indent_cache.__indent_string, '');
break;
}
return s + "@" + d + c.trim();
});
sweet_code = sweet_code.replace(/@(case|default)((?:(?!@break).|\n)+)@break/gim, function addMoreIndent(m, t, c) {
var indent = printer._output.__indent_cache.__base_string;
c = c.replace(/\n/g, "\n" + indent + printer._output.__indent_cache.__indent_string);
c = c.replace(new RegExp(indent + '@' + t, 'gi'), '@' + t);
return "@" + t + c + "@break";
});
sweet_code = sweet_code.replace(/\{\{(--)?((?:(?!(--)?\}\}).)+)(--)?\}\}/g, function (m, ds, c, dh, de) {
if (c) {
c = decodeURIComponent(c);
c = c.replace(/'/g, "'");
c = c.replace(/"/g, '"');
c = c.replace(/(^[ \t]*|[ \t]*$)/g, ' ');
}
return "{{" + (ds ? ds : "") + c + (de ? de : "") + "}}";
});
// END blade-2of2
- Save the file and restart VS Code.
- 保存文件并重新启动 VS Code。
Of course this has to be redone if the file is changed, by an update or otherwise.
当然，如果通过更新或其他方式更改了文件，则必须重做。
Ref. https://gist.github.com/fzldn/a27973ff7e4c8e3738b0e06e525f7403#gistcomment-2693197
参考 https://gist.github.com/fzldn/a27973ff7e4c8e3738b0e06e525f7403#gistcomment-2693197
