blocks|key|17138|text|更新2022:此扩展可能不再维护。|type|blockquote|depth|inlineStyleRanges|entityRanges|data|17139|对于我来说，这扩展非常适合使用以下设置进行自动缩进：|unstyled|offset|length|17140|"beautify.language":+{
++++++++"html":+[
++++++++++++"blade",
++++++++++++"html"
++++++++]
++++},|code-block|syntax|javascript|17141|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify^0|0|6|1|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@$E|V|F|W|1|X]]|A|$]]|$1|G|3|H|5|I|7|Y|8|@]|9|@]|A|$J|K]]|$1|L|3|-4|5|D|7|Z|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

<blockquote>
UPDATE 2022: this extension may no longer be maintained.
</blockquote>
For me, <a href="https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify" rel="nofollow noreferrer">this</a> extension works perfect for auto indentation with the following settings:
<pre><code>&quot;beautify.language&quot;: {
 &quot;html&quot;: [
 &quot;blade&quot;,
 &quot;html&quot;
 ]
 },
</code></pre>

blocks|key|17171|text|首先安装这个扩展，https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|17172|打开settings.json.加上这一行。|style|CODE|17173|"[blade]":+{
++++"editor.defaultFormatter":+"onecentlin.laravel-blade",
++++"editor.formatOnSave":+true
}|code-block|syntax|javascript|17174|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade^0|9|24|0|0|2|D|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

First install this extension, <a href="https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade" rel="noreferrer">https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade</a>

Open <code>settings.json</code>.
Add this lines.

<pre><code>"[blade]": {
 "editor.defaultFormatter": "onecentlin.laravel-blade",
 "editor.formatOnSave": true
}
</code></pre>

blocks|key|1653327|text|Files>Preferences>Settings>Extensions>Blade+Configurations|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1653328|然后启用格式刀片文件(跟随图像).Then，重新启动Visual+Code.Now，使用Shift%2BAlt%2BF进行格式化。好了好了。|unstyled|offset|length|style|BOLD|1653329|entityMap^0|0|18|B|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>Files&gt;Preferences&gt;Settings&gt;Extensions&gt;Blade Configurations
</code></pre>

Then Enable format blade file (Follow Image).Then Restart Visual Studio Code.Now Use Shift+Alt+F To format. Now OK.
<a href="https://i.stack.imgur.com/K8oAo.png" rel="noreferrer"></a>
<a href="https://i.stack.imgur.com/TXvwq.png" rel="noreferrer"></a>

blocks|key|1653485|text|此解决方案在2021中适用于我。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1653486|首先，在更新您的拉拉维尔叶片文件之后安装settings.json并添加本节|CODE|1653487|"[blade]":+{
++"editor.defaultFormatter":+"amirmarmul.laravel-blade-vscode",
++"editor.formatOnSave":+true
}|code-block|syntax|javascript|1653488|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items?itemName=amirmarmul.laravel-blade-vscode^0|6|4|0|K|D|8|6|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|H]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|I|3|J|5|K|7|14|8|@]|D|@]|E|$L|M]]|$1|N|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

this solution works for me in 2021
First, install <a href="https://marketplace.visualstudio.com/items?itemName=amirmarmul.laravel-blade-vscode" rel="noreferrer">Laravel Blade</a> after that update your <code>settings.json</code> file and add this section
<pre class="lang-json prettyprint-override"><code>&quot;[blade]&quot;: {
 &quot;editor.defaultFormatter&quot;: &quot;amirmarmul.laravel-blade-vscode&quot;,
 &quot;editor.formatOnSave&quot;: true
}
</code></pre>

blocks|key|14948|text|安装Laravel格式化程序扩展名后，将这些行添加到VS代码settings.json文件中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14949|https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter|offset|length|14950|"editor.formatOnSave":+true,
"[blade]":+{
++++"editor.defaultFormatter":+"shufo.vscode-blade-formatter"
},|code-block|syntax|javascript|14951|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|28|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

Add these lines to your VS Code settings.json file after installing Laravel Blade Formatter extension:
<a href="https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter" rel="nofollow noreferrer">https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter</a>
<pre><code>&quot;editor.formatOnSave&quot;: true,
&quot;[blade]&quot;: {
 &quot;editor.defaultFormatter&quot;: &quot;shufo.vscode-blade-formatter&quot;
},
</code></pre>

blocks|key|14911|text|我建议在指令中支持指令缩进和php代码格式的VSCode的VSCode。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14912|屏幕截图|offset|length|14913|这是基于我以前的项目叶片形件。我创建的动机是，我希望通过CLI以编程方式格式化带有正确缩进的刀片文件。|14914|如果您想要缩进指令，请尝试。|14915|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/bgH5r.gif|1|https://github.com/shufo/blade-formatter^0|0|0|4|0|0|A|4|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

I would like to suggest <a href="https://github.com/shufo/vscode-blade-formatter" rel="nofollow noreferrer">vscode-blade-formatter</a> for VSCode that support directive indentation and php code formatting in directives.
<a href="https://i.stack.imgur.com/bgH5r.gif" rel="nofollow noreferrer">screenshot</a>
This is based on my previous project <a href="https://github.com/shufo/blade-formatter" rel="nofollow noreferrer">blade-formatter</a>.
The motivation I created this is I wanna format blade files with correct indentation programmatically via CLI.
Try if you would like to indent directives.

blocks|key|15146|text|若要使用与HTML兼容的任何扩展，请使用emmet.includeLanguages+(Emmet包含语言)设置。添加项blade和值html。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|15147|​|15148|📷|atomic|15149|15150|++++"emmet.includeLanguages":+{
++++++++"blade":+"html"+//+Use+HTML+in+Blade+files
++++},|code-block|syntax|javascript|15151|现在HTML在Blade相关文件中工作，您可以使用Blade和HTML片段以及其他扩展名。|15152|15153|15154|15155|15156|15157|15158|15159|15160|15161|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/0b2c135a6c444b2bbf5acb52513f2797.png|imageAlt|1|https://developer.qcloudimg.com/http-save/yehe-900000/ffab168cbcbeb882f8533f74939893b2.png|2|https://developer.qcloudimg.com/http-save/yehe-900000/a7df700008202f89bd952c83f4c76504.png|3|https://developer.qcloudimg.com/http-save/yehe-900000/4cebaa471c41cb21260b2eae36e82858.png^0|K|M|1O|5|1V|4|0|0|0|1|0|0|0|0|0|0|0|1|1|0|0|0|0|1|2|0|0|0|0|1|3|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1N|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1O|8|@]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|K|3|G|5|6|7|1S|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1T|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1U|8|@]|D|@]|E|$]]|$1|S|3|G|5|6|7|1V|8|@]|D|@]|E|$]]|$1|T|3|I|5|J|7|1W|8|@]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|U|3|G|5|6|7|20|8|@]|D|@]|E|$]]|$1|V|3|G|5|6|7|21|8|@]|D|@]|E|$]]|$1|W|3|I|5|J|7|22|8|@]|D|@$9|23|A|24|1|25]]|E|$]]|$1|X|3|G|5|6|7|26|8|@]|D|@]|E|$]]|$1|Y|3|G|5|6|7|27|8|@]|D|@]|E|$]]|$1|Z|3|I|5|J|7|28|8|@]|D|@$9|29|A|2A|1|2B]]|E|$]]|$1|10|3|G|5|6|7|2C|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|2D|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18|19|-4]]|1A|$5|14|15|16|E|$17|1B|19|-4]]|1C|$5|14|15|16|E|$17|1D|19|-4]]|1E|$5|14|15|16|E|$17|1F|19|-4]]]]

To use Blade with any extension that works with HTML use <code>emmet.includeLanguages</code> (Emmet Include languages) settings. Add item <code>blade</code> and value <code>html</code>.
<a href="https://i.stack.imgur.com/yF8X8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yF8X8.png" alt="enter image description here" /></a>
<pre><code> &quot;emmet.includeLanguages&quot;: {
 &quot;blade&quot;: &quot;html&quot; // Use HTML in Blade files
 },
</code></pre>
Now HTML works in Blade associated files, you may use Blade and HTML snippets and other extensions.
<a href="https://i.stack.imgur.com/WoMWx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WoMWx.png" alt="enter image description here" /></a>
<a href="https://i.stack.imgur.com/1Tzi0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Tzi0.png" alt="enter image description here" /></a>
<a href="https://i.stack.imgur.com/JZnda.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JZnda.png" alt="enter image description here" /></a>

blocks|key|14878|text|我发现的唯一解决方案实际上将尝试缩进刀片文件中混合了html的刀片指令，这是针对Beautify扩展名的beautifier+javascript的一个黑客攻击，由Faizal+Nugraha完成。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14879|编辑:不过，这似乎不支持在html+<script>标记中格式化刀片指令。美化似乎是将其格式化为JavaScript。|offset|length|style|BOLD|CODE|14880|安装美化扩展|ordered-list-item|14881|编辑~/.vscode/extensions/hookyqr.beautify-1.5.0/node_modules/js-beautify/js/src/html/beautifier.js+(Linux/MacOS)或%25USERPROFILE%25\.vscode\extensions\hookyqr.beautify-1.5.0\node_modules\js-beautify\js\src\html\beautifier.js+(%25USERPROFILE%25\.vscode\extensions\hookyqr.beautify-1.5.0\node_modules\js-beautify\js\src\html\beautifier.js)并执行以下操作：|14882|查找函数Beautifier.prototype.beautify+=+function()。|14883|在函数内部查找行var+source_text+=+this._source_text;|14884|在这一行之后，粘贴：|14885|++++++++//+BEGIN+blade-1of2
++++++++source_text+=+source_text.replace(/\{\{(--)?((?:(?!(--)?\}\}).)%2B)(--)?\}\}/g,+function(m,+ds,+c,+dh,+de)+{
++++++++if+(c)+{
++++++++++++c+=+c.replace(/(%5E[+\t]*%7C[+\t]*$)/g,+'');
++++++++++++c+=+c.replace(/'/g,+'&#39;');
++++++++++++c+=+c.replace(/"/g,+'&#34;');
++++++++++++c+=+encodeURIComponent(c);
++++++++}
++++++++return+"{{"+%2B+(ds+?+ds+:+"")+%2B+c+%2B+(de+?+de+:+"")+%2B+"}}";
++++});
++++source_text+=+source_text.replace(/%5E[+\t]*@([a-z]%2B)([%5E\n]*)$/gim,+function(m,+d,+c)+{
++++++++if+(c)+{
++++++++++++c+=+c.replace(/'/g,+'&#39;');
++++++++++++c+=+c.replace(/"/g,+'&#34;');
++++++++++++c+=+"%7C"+%2B+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+"+%2B+d+%2B+c+%2B+"/>";
++++++++++++default:
++++++++++++++++if+(d.startsWith('end'))+{
++++++++++++++++++++return+"</blade+"+%2B+d+%2B+c+%2B+">";
++++++++++++++++}+else+{
++++++++++++++++++++return+"<blade+"+%2B+d+%2B+c+%2B+">";
++++++++++++++++}
++++++++}
++++});
++++//+END+blade-1of2|code-block|syntax|javascript|14886|查找行var+sweet_code+=+printer._output.get_code(eol);|14887|14888|++++//+BEGIN+blade-2of2
++++sweet_code+=+sweet_code.replace(/%5E([+\t]*)<\/?blade+([a-z]%2B)\%7C?([%5E>\/]%2B)?\/?>$/gim,+function+toDirective(m,+s,+d,+c)+{
++++++++if+(c)+{
++++++++++++c+=+decodeURIComponent(c);
++++++++++++c+=+c.replace(/&#39;/g,+"'");
++++++++++++c+=+c.replace(/&#34;/g,+'"');
++++++++++++c+=+c.replace(/%5E[+\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+%2B+"@"+%2B+d+%2B+c.trim();
++++});
++++sweet_code+=+sweet_code.replace(/@(case%7Cdefault)((?:(?!@break).%7C\n)%2B)@break/gim,+function+addMoreIndent(m,+t,+c)+{
++++++++var+indent+=+printer._output.__indent_cache.__base_string;
++++++++c+=+c.replace(/\n/g,+"\n"+%2B+indent+%2B+printer._output.__indent_cache.__indent_string);
++++++++c+=+c.replace(new+RegExp(indent+%2B+'@'+%2B+t,+'gi'),+'@'+%2B+t);
++++++++return+"@"+%2B+t+%2B+c+%2B+"@break";
++++});
++++sweet_code+=+sweet_code.replace(/\{\{(--)?((?:(?!(--)?\}\}).)%2B)(--)?\}\}/g,+function+(m,+ds,+c,+dh,+de)+{
++++++++if+(c)+{
++++++++++++c+=+decodeURIComponent(c);
++++++++++++c+=+c.replace(/&#39;/g,+"'");
++++++++++++c+=+c.replace(/&#34;/g,+'"');
++++++++++++c+=+c.replace(/(%5E[+\t]*%7C[+\t]*$)/g,+'+');
++++++++}
++++++++return+"{{"+%2B+(ds+?+ds+:+"")+%2B+c+%2B+(de+?+de+:+"")+%2B+"}}";
++++});
++++//+END+blade-2of2|14889|保存文件并重新启动VS代码。|14890|当然，如果通过更新或其他方式更改文件，则必须重新执行此操作。|14891|参考https://gist.github.com/fzldn/a27973ff7e4c8e3738b0e06e525f7403#gistcomment-2693197|14892|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify|1|https://gist.github.com/fzldn/a27973ff7e4c8e3738b0e06e525f7403#gistcomment-2693197^0|0|0|6|I|8|0|2|2|0|0|2|2M|33|2Y|63|2Y|0|4|16|0|8|10|0|0|0|3|1B|0|0|0|0|0|2|2A|1|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1K|8|@$D|1L|E|1M|F|G]|$D|1N|E|1O|F|H]]|9|@]|A|$]]|$1|I|3|J|5|K|7|1P|8|@]|9|@$D|1Q|E|1R|1|1S]]|A|$]]|$1|L|3|M|5|K|7|1T|8|@$D|1U|E|1V|F|H]|$D|1W|E|1X|F|H]|$D|1Y|E|1Z|F|H]]|9|@]|A|$]]|$1|N|3|O|5|K|7|20|8|@$D|21|E|22|F|H]]|9|@]|A|$]]|$1|P|3|Q|5|K|7|23|8|@$D|24|E|25|F|H]]|9|@]|A|$]]|$1|R|3|S|5|K|7|26|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|27|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|K|7|28|8|@$D|29|E|2A|F|H]]|9|@]|A|$]]|$1|10|3|S|5|K|7|2B|8|@]|9|@]|A|$]]|$1|11|3|12|5|V|7|2C|8|@]|9|@]|A|$W|X]]|$1|13|3|14|5|K|7|2D|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2E|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2F|8|@]|9|@$D|2G|E|2H|1|2I]]|A|$]]|$1|19|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]|1H|$5|1C|1D|1E|A|$1F|1I]]]]

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.

Edit: This doesn't appear to support formatting of blade directives inside an html <code>&lt;script&gt;</code> tag, though. Beautify seems to format that as JavaScript.

<ol>
<li>Install the <a href="https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify" rel="nofollow noreferrer">Beautify</a> extension</li>
<li>Edit <code>~/.vscode/extensions/hookyqr.beautify-1.5.0/node_modules/js-beautify/js/src/html/beautifier.js</code> (Linux/MacOS) or <code>%USERPROFILE%\.vscode\extensions\hookyqr.beautify-1.5.0\node_modules\js-beautify\js\src\html\beautifier.js</code> (Windows) and do the following:</li>
<li>Look for the function <code>Beautifier.prototype.beautify = function()</code>.</li>
<li>Inside the function look for the line <code>var source_text = this._source_text;</code></li>
<li>After that line, paste in:</li>
</ol>

<pre><code> // 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, '&amp;#39;');
 c = c.replace(/"/g, '&amp;#34;');
 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, '&amp;#39;');
 c = c.replace(/"/g, '&amp;#34;');
 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 "&lt;blade " + d + c + "/&gt;";
 default:
 if (d.startsWith('end')) {
 return "&lt;/blade " + d + c + "&gt;";
 } else {
 return "&lt;blade " + d + c + "&gt;";
 }
 }
 });
 // END blade-1of2
</code></pre>

<ol start="6">
<li>Look for the line <code>var sweet_code = printer._output.get_code(eol);</code></li>
<li>After that line, paste in:</li>
</ol>

<pre><code> // BEGIN blade-2of2
 sweet_code = sweet_code.replace(/^([ \t]*)&lt;\/?blade ([a-z]+)\|?([^&gt;\/]+)?\/?&gt;$/gim, function toDirective(m, s, d, c) {
 if (c) {
 c = decodeURIComponent(c);
 c = c.replace(/&amp;#39;/g, "'");
 c = c.replace(/&amp;#34;/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(/&amp;#39;/g, "'");
 c = c.replace(/&amp;#34;/g, '"');
 c = c.replace(/(^[ \t]*|[ \t]*$)/g, ' ');
 }
 return "{{" + (ds ? ds : "") + c + (de ? de : "") + "}}";
 });
 // END blade-2of2
</code></pre>

<ol start="8">
<li>Save the file and restart VS Code.</li>
</ol>

Of course this has to be redone if the file is changed, by an update or otherwise.

Ref. <a href="https://gist.github.com/fzldn/a27973ff7e4c8e3738b0e06e525f7403#gistcomment-2693197" rel="nofollow noreferrer">https://gist.github.com/fzldn/a27973ff7e4c8e3738b0e06e525f7403#gistcomment-2693197</a>

blocks|key|14963|text|将此添加到settings.json中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|14964|"beautify.language":+{
++++++++"html":+[
++++++++++++++++"blade"
++++++++]
},|code-block|syntax|javascript|14965|entityMap^0|5|D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Add this in <code>settings.json</code>
<pre><code>&quot;beautify.language&quot;: {
 &quot;html&quot;: [
 &quot;blade&quot;
 ]
},
</code></pre>

blocks|key|1653589|text|你只能靠自己的设备在这里找到正确的分机。您可能希望使用扩展，因为它比内置格式具有更大的功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1653590|很长一段时间以来，我一直在使用拉拉维尔刀锋片，因为在发出这条消息时，它已经安装了140万个。然而，我最近换到了Laravel叶片成形机，虽然只有134+K安装，但我现在更高兴了。|offset|length|1653591|一旦你找到你的毒药，控制-转移-我是你的朋友。|1653592|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade&ssr=false#review-details|1|https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter&ssr=false#review-details^0|0|F|7|0|1J|C|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]|$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

You're left to your own devices in finding the right extension here. You would want to use an extension because it has more power than the built-in formatting.
For a long time I was using <a href="https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade&amp;ssr=false#review-details" rel="nofollow noreferrer">Laravel Blade Snippets</a> because at the time of this message it has 1.4 million installs. However, I've recently swapped over to <a href="https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter&amp;ssr=false#review-details" rel="nofollow noreferrer">Laravel Blade Formatter</a> and although only 134K installs, I'm much happier now.
Once you've found your poison, Control-Shift-i is your friend.

blocks|key|17523|text|右键单击文档中的任何位置，选择“format+document+with”，然后选择laravel刀片片段。首先安装Laravel刀片片段扩展。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|17524|📷|atomic|17525|​|17526|17527|17528|17529|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/9602ff702dd7122ea85315f1bf95faa2.png|imageAlt|1|https://developer.qcloudimg.com/http-save/yehe-900000/e462b3cbdccd0e6aec9814335cfeb720.png^0|16|B|0|0|1|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|I|3|J|5|6|7|15|8|@]|D|@]|E|$]]|$1|K|3|J|5|6|7|16|8|@]|D|@]|E|$]]|$1|L|3|G|5|H|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|M|3|J|5|6|7|1B|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U|V|-4]]|W|$5|Q|R|S|E|$T|X|V|-4]]]]

Right click anywhere in the document, select 'format document with' and than select laravel blade snippets. Install Laravel blade snippets extension first.<a href="https://i.stack.imgur.com/Ktdy9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ktdy9.png" alt="enter image description here" /></a>
<a href="https://i.stack.imgur.com/rQJTE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rQJTE.png" alt="enter image description here" /></a>

I have installed some Visual Studio Code extensions to handle Laravel Blade Codes like
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=KTamas.laravel-blade" rel="nofollow noreferrer">KTamas.laravel-blade</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade" rel="nofollow noreferrer">onecentlin.laravel-blade</a></li>
</ul>
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.
Example :
<a href="https://i.stack.imgur.com/SyG3m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SyG3m.png" alt="enter image description here" /></a>
<a href="https://medium.com/@ardanirohman/laravel-%EF%B8%8F-visual-studio-code-debug-environment-65440274d3b0" rel="nofollow noreferrer">Visual Studio Code Environment For Laravel</a>
Is their any specific configuration or technique which I can use to make these extensions work or there is some other way?

How to Format Laravel Blade Codes in Visual Studio Code?

5位重磅专家聚焦 AI 时代开发者核心成长需求，带你深入解锁全栈进化、人机协作关键路径！点击报名到场：<a href="https://cloud.tencent.com/developer/salon/salon-2403/signup" target="_blank">https://cloud.tencent.com/developer/salon/salon-2403/signup</a> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/487c82639d2338df3ef66dfb1450601a.png"/>

腾讯技术创作特训营「年度论坛」正在报名中！

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我安装了一些Visual代码扩展来处理Laravel代码，如但是他们并没有帮助我格式化Laravel代码blade.php文件。我的意思是，他们不是自动缩进代码，正如我所预期的。但是我在网上看到了刀片代码，这些代码在中都有很好的缩进。示例:​​他们的任何特定的配置或技术，我可以使用，使这些扩展工作，或有其他方式？

问如何在Visual代码中格式化Laravel代码？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Visual代码中格式化Laravel代码？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Visual代码中格式化Laravel代码？
EN