I have installed some Visual Studio Code extensions to handle Laravel Blade Code like
But they are not helping me to format Laravel Blade Code [blade.php files]. I mean they are not auto indenting the code as I expected. But I have seen blade code 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?
On
Restart VS Code for the changes to take effect.
Use auto-formatter Shortcut for Windows: Shift+Alt+F
On
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
}
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
On
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.
On
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
}
Right click anywhere in the document, select 'format document with' and than select laravel blade snippets. Install Laravel blade snippets extension first.
On
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"
},
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.
On
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.
On
I tried Blade Snippet By Winnie but it has multiple issue. Recently I started using the below on and its working perfectly.
Name: Laravel Blade
Id: amirmarmul.laravel-blade-vscode
Description: Snippets, Syntax Highlighting, and Formatting for VS Code
Version: 2.0.4
Publisher: amirmarmul
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=amirmarmul.laravel-blade-vscode
First go to "Visual Studio Code" Settings and 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
It'll associate .blade.php and .tpl file extensions for html type
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 code in a single line while executing format command. However, if your code 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.
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
That's it.