How to Format Laravel Blade Codes in Visual Studio Code?

php laravel visual-studio-code laravel-blade
coolsaint picture coolsaint · Sep 17, 2017 · Viewed 52.7k times · Source

I have installed some Visual Studio Code extensions to handle Laravel Blade Codes like

laravel-blade [ https://marketplace.visualstudio.com/items?itemName=KTamas.laravel-blade ]

Laravel Blade Snippets [ 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.

Example :

enter image description here

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

Answer

Syed Ekram Uddin picture Syed Ekram Uddin · Mar 9, 2018

  1. 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.

  2. In the settings overwrite panel past the following snippet

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

It'll associate .blade.php and .tpl file extensions for html type

Save it and your are good to go. Happy formatting :)

enter image description here

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.

Update: Seems updated version adds an option to enable blade formatting in the user settings. To use that,

  1. Please make sure you are using the latest version and "Laravel Blade Snippets" Extension installed.

  2. Then Ctrl+Shift+P : type User settings : Enter

enter image description here 3. In "User settings" > "Extensions" > "Blade Configaration" check the option Enable format blade file.

enter image description here

That's it.

Related questions

Visual Studio Code PHP Intelephense Keep Showing Not Necessary Error

After the latest update of PHP Intelephense that I get today, the intelephense keep showing an error for an undefined symbol for my route (and other class too), there is no error like this before and it's bothering me. Here …

Read More
How can I format PHP files with HTML markup in Visual Studio Code?

I'm using Laravel so all the views are .blade.php files. Visual Studio Code won't format the HTML because of the PHP extension. I removed the "blade" part of the filename, but it still isn't formatting the files properly (via …

Read More
How Do I Get the Query Builder to Output Its Raw SQL Query as a String?

Given the following code: DB::table('users')->get(); I want to get the raw SQL query string that the database query builder above will generate. In this example, it would be SELECT * FROM users. How do I do …

Read More