I have installed some Visual Studio Code extensions to handle Laravel Blade Codes like
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 :
Visual Studio Code Environment For Laravel
Is their any specific configuration or technique which I can use to make these extensions work or there is some other way?
Update your VSCode. Go to Settings>Extensions and Enable Blade Format checkbox. Use Shortcut for Window: Shift+Alt+F:
UPDATE 2022: this extension may no longer be maintained.
For me, this extension works perfect for auto indentation with the following settings:
"beautify.language": {
"html": [
"blade",
"html"
]
},
First install this extension, https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade
Open settings.json.
Add this lines.
"[blade]": {
"editor.defaultFormatter": "onecentlin.laravel-blade",
"editor.formatOnSave": true
}
Files>Preferences>Settings>Extensions>Blade Configurations
Then Enable format blade file (Follow Image).Then Restart Visual Studio Code.Now Use Shift+Alt+F To format. Now OK.
this solution works for me in 2021
First, install Laravel Blade after that update your settings.json file and add this section
"[blade]": {
"editor.defaultFormatter": "amirmarmul.laravel-blade-vscode",
"editor.formatOnSave": true
}
Add these lines to your VS Code settings.json file after installing Laravel Blade Formatter extension:
https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter
editor.formatOnSave": true,
"[blade]": {
"editor.defaultFormatter": "shufo.vscode-blade-formatter"
},
I would like to suggest vscode-blade-formatter for VSCode that support directive indentation and php code formatting in directives.
This is based on my previous project blade-formatter. 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.
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 <script> tag, though. Beautify seems to format that as JavaScript.
~/.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: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
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
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
To use Blade with any extension that works with HTML use emmet.includeLanguages (Emmet Include languages) settings. Add item blade and value html.
"emmet.includeLanguages": {
"blade": "html" // Use HTML in Blade files
},
Now HTML works in Blade associated files, you may use Blade and HTML snippets and other extensions.
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 Laravel Blade Snippets because at the time of this message it has 1.4 million installs. However, I've recently swapped over to Laravel Blade Formatter and although only 134K installs, I'm much happier now.
Once you've found your poison, Control-Shift-i is your friend.
Right click anywhere in the document, select 'format document with' and than select laravel blade snippets. Install Laravel blade snippets extension first.
