W3docs

How to Format Laravel Blade Code in Visual Studio Code?

You can use the Laravel Blade Snippets extension for Visual Studio Code to format Blade code in your Laravel projects.

You can use the Laravel Blade Formatter extension by mblode for Visual Studio Code to format Blade code in your Laravel projects. Here's an example of how to use the extension to format your Blade templates:

  1. Install the Laravel Blade Formatter extension by searching for it in the Visual Studio Code Extension Marketplace.
  2. Open a new or existing Blade file in Visual Studio Code.
  3. Use the built-in format document shortcut: press Shift + Alt + F (Windows/Linux) or Shift + Option + F (Mac). Alternatively, right-click in the editor and select Format Document.
  4. For automatic formatting on save, add "editor.formatOnSave": true to your VS Code settings.json file.

Example:

Example of formatted Laravel Blade Code in Visual Studio Code

@section('content')
    <h1>Welcome to my website</h1>
    <p>Here is some content for the website.</p>
@endsection

This will properly indent and structure your Blade directives.

Note: The extension also provides syntax highlighting, autocompletion, and formatting rules for Blade-specific constructs to make your development experience more efficient.