### Install dependencies for development

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

These commands install project dependencies and start a watch process for development. The watch command automatically rebuilds the project when files change, facilitating active development.

```bash
$ yarn install
$ yarn run watch # watch changes
```

--------------------------------

### Format Blade templates via CLI commands (Bash)

Source: https://context7.com/shufo/blade-formatter/llms.txt

Provides example command‑line usage of blade-formatter. Includes commands to format files and print the result to stdout, check whether files are already formatted, and apply formatting changes directly to files with optional progress indication.

```bash
# Format a single file
blade-formatter resources/views/layouts/app.blade.php

# Format multiple files with glob patterns
blade-formatter "resources/views/**/*.blade.php"

# Output shows formatted content on stdout
```

```bash
# Check if files need formatting
blade-formatter "resources/**/*.blade.php" --check-formatted

# Example output:
# Check formatting...
# resources/views/users/index.blade.php
# resources/views/products/show.blade.php
#
# Above file(s) are formattable. Forgot to run formatter? Use --write option to overwrite.

# Check exit code
echo $?
# 1 (non-zero if files need formatting)
```

```bash
# Format and write to files
blade-formatter "resources/**/*.blade.php" --write

# With progress indicator
blade-formatter "resources/**/*.blade.php" --write --progress
# Output: .F..E.F.
# Fixed: F
# Errors: E
# Not Changed: .
```

--------------------------------

### Install blade-formatter globally

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Installs the blade-formatter package globally on your system, making the command available from any directory. This is useful for running the formatter on multiple projects or for quick command-line usage.

```bash
$ npm install -g blade-formatter
$ yarn global add blade-formatter
```

--------------------------------

### Example Blade Input

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

This is an example of an unformatted Blade template file, showcasing various Blade directives, HTML structure, and embedded PHP code.

```blade
@extends('frontend.layouts.app')
@section('title') foo
@endsection
@section('content')
<section id="content">
<div class="container mod-users-pd-h">
    <div class="pf-user-header">
    <div></div>
    <p>@lang('users.index')</p>
    </div>
        <div class="pf-users-branch">
            <ul class="pf-users-branch__list">
                @foreach($users as $user)
        <li>
            <img src="{{ asset('img/frontend/icon/branch-arrow.svg') }}" alt="branch_arrow">
            {{ link_to_route("frontend.users.user.show",$users["name"],$users['_id'])
        </li>
        @endforeach
      </ul>
      <div class="pf-users-branch__btn">
      @can('create', App\Models\User::class)
            {!! link_to_route("frontend.users.user.create",__('users.create'),[1,2,3],['class' => 'btn'])
            @endcan
        </div>
  </div>
    </div>
</section>
@endsection
@section('footer')
@stop

```

--------------------------------

### Format Blade template content using ES Module import (JavaScript)

Source: https://context7.com/shufo/blade-formatter/llms.txt

Illustrates using ES module syntax to import the Formatter class from blade-formatter and format Blade content via the `formatContent` method. The example includes custom options such as indentation size, Tailwind class sorting, and line ending style, and demonstrates error handling with a Promise.

```javascript
import { Formatter } from 'blade-formatter';

const input = `
@extends('layouts.app')
@section('content')
<div class=\"bg-blue-500 text-white p-4 m-2\">
<h1>{{ $title }}</h1>
</div>
@endsection
`;

const options = {
  indentSize: 2,
  sortTailwindcssClasses: true,
  endOfLine: 'LF'
};

new Formatter(options).formatContent(input).then((formatted) => {
  console.log(formatted);
  // Output:
  // @extends('layouts.app')
  // @section('content')
  //   <div class=\"m-2 bg-blue-500 p-4 text-white\">
  //     <h1>{{ $title }}</h1>
  //   </div>
  // @endsection
}).catch((error) => {
  throw new Error(`Format error: ${error.message}`);
});
```

--------------------------------

### Install blade-formatter with npm

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Installs the blade-formatter package as a development dependency using npm. This command is used to add the formatter to your project for local development and build processes.

```bash
$ npm install --save-dev blade-formatter
$ node_modules/.bin/blade-formatter -h
```

--------------------------------

### Format Blade template content using BladeFormatter class (CommonJS)

Source: https://context7.com/shufo/blade-formatter/llms.txt

Demonstrates how to programmatically format a Blade template string using the BladeFormatter class from the blade-formatter package. The first example uses default settings, while the second shows custom configuration options such as indentation size, line length, attribute wrapping, and Tailwind class sorting. Both examples use the CommonJS `require` syntax and return a Promise with the formatted markup.

```javascript
const { BladeFormatter } = require('blade-formatter');

const input = `
<section id=\"content\">
<div class=\"container\">
<div class=\"pf-user-header\">
<div></div>
<p>@lang('users.index')</p>
</div>
@foreach($users as $user)
<li>
<img src=\"{{ asset('img/icon.svg') }}\" alt=\"icon\">
{{ link_to_route(\"users.show\",$users[\"name\"],$users['_id']) }}
</li>
@endforeach
</div>
</section>
`;

new BladeFormatter().format(input).then((formatted) => {
  console.log(formatted);
  // Output:
  // <section id=\"content\">
  //     <div class=\"container\">
  //         <div class=\"pf-user-header\">
  //             <div></div>
  //             <p>@lang('users.index')</p>
  //         </div>
  //         @foreach ($users as $user)
  //             <li>
  //                 <img src=\"{{ asset('img/icon.svg') }}\" alt=\"icon\">
  //                 {{ link_to_route('users.show', $users['name'], $users['_id']) }}
  //             </li>
  //         @endforeach
  //     </div>
  // </section>
});
```

```javascript
const { BladeFormatter } = require('blade-formatter');

const input = `
<div class=\"container\"><p>Hello World</p></div>
`;

const options = {
  indentSize: 2,
  wrapLineLength: 80,
  wrapAttributes: 'force-aligned',
  wrapAttributesMinAttrs: 2,
  endWithNewLine: true,
  useTabs: false,
  sortTailwindcssClasses: true,
  sortHtmlAttributes: 'alphabetical',
  noMultipleEmptyLines: true
};

new BladeFormatter(options).format(input).then((formatted) => {
  console.log(formatted);
  // Output:
  // <div class=\"container\">
  //   <p>Hello World</p>
  // </div>
}).catch((error) => {
  console.error('Formatting failed:', error.message);
  process.exit(1);
});
```

--------------------------------

### Build and run with Docker for development

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

These commands build and run the project using Docker. This approach is particularly helpful for non-amd64 architectures where native builds might not work correctly. Requires Docker to be installed.

```bash
$ make build
$ make run example.php
```

--------------------------------

### Run tests locally

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

These commands install dependencies and run the test suite for the project. They ensure that all tests pass before making changes or submitting pull requests.

```bash
$ yarn install
$ yarn run test
```

--------------------------------

### Install blade-formatter with yarn

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Installs the blade-formatter package as a development dependency using yarn. This is an alternative to npm for managing project dependencies.

```bash
$ yarn add --dev blade-formatter
```

--------------------------------

### Example Blade Output

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

This is the formatted version of the Blade template input, demonstrating how blade-formatter applies indentation, spacing, and maintains code readability according to its rules.

```blade
@extends('frontend.layouts.app')
@section('title') foo
@endsection
@section('content')
    <section id="content">
        <div class="container mod-users-pd-h">
            <div class="pf-user-header">
                <div></div>
                <p>@lang('users.index')</p>
            </div>
            <div class="pf-users-branch">
                <ul class="pf-users-branch__list">
                    @foreach ($users as $user)
                        <li>
                            <img src="{{ asset('img/frontend/icon/branch-arrow.svg') }}" alt="branch_arrow">
                            {{ link_to_route('frontend.users.user.show', $users['name'], $users['_id']) }}
                        </li>
                    @endforeach
                </ul>
                <div class="pf-users-branch__btn">
                    @can('create', App\Models\User::class)
                        {!! link_to_route('frontend.users.user.create', __('users.create'), [1, 2, 3], ['class' => 'btn'])
                    @endcan
                </div>
            </div>
        </div>
    </section>
@endsection
@section('footer')
@stop

```

--------------------------------

### Blade Formatter Configuration File Example (.bladeformatterrc.json)

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

An example of a `.bladeformatterrc.json` file used for project-wide configuration. It demonstrates various settings such as indentation size, line wrapping, attribute wrapping, end-of-line characters, sorting of Tailwind CSS classes and HTML attributes, and PHP version specification. These settings override defaults and can be placed in the repository root.

```json
{
  "indentSize": 4,
  "wrapAttributes": "auto",
  "wrapLineLength": 120,
  "wrapAttributesMinAttrs": 2,
  "indentInnerHtml": true,
  "endWithNewLine": true,
  "endOfLine": "LF",
  "useTabs": false,
  "sortTailwindcssClasses": true,
  "sortHtmlAttributes": "none",
  "noMultipleEmptyLines": false,
  "noPhpSyntaxCheck": false,
  "noSingleQuote": false,
  "noTrailingCommaPhp": false,
  "extraLiners": [],
  "componentPrefix": ["x-", "livewire:"]
  "phpVersion": "8.4"
}
```

--------------------------------

### Blade Formatter Command-Line Options

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Lists available command-line options for the blade-formatter tool. These options control aspects like checking formatting, writing changes, showing diffs, line endings, indentation, wrapping, sorting attributes, and more. The example shows how to format all files in a directory.

```bash
blade-formatter "resources/views/**/*.blade.php" --write  Format all files in views directory
```

--------------------------------

### Run blade-formatter with Docker

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Executes the blade-formatter command within a Docker container, mounting the current directory as a volume. This allows you to format files without installing Node.js or the formatter locally.

```bash
$ docker run -it -v $(pwd):/app -w /app shufo/blade-formatter resources/**/*.blade.php
```

--------------------------------

### Specify files to ignore using .bladeignore

Source: https://context7.com/shufo/blade-formatter/llms.txt

Create a .bladeignore file to exclude specific Blade templates or directories from formatting. Supports glob patterns similar to .gitignore.

```gitignore
# Ignore specific files
resources/views/legacy/old-template.blade.php

# Ignore directory
resources/views/vendor/*

# Ignore all files in subdirectories
resources/views/emails/**/*

# Pattern matching
resources/views/generated-*.blade.php
```

--------------------------------

### Format Blade templates via CLI with custom options

Source: https://context7.com/shufo/blade-formatter/llms.txt

Use the Blade Formatter CLI to format files with various options such as indentation, line wrapping, Tailwind CSS class sorting, and HTML attribute ordering. Supports writing changes, showing diffs, and combining multiple flags. Suitable for local development and CI pipelines.

```bash
blade-formatter "app/**/*.blade.php" --write --diff
```

```bash
blade-formatter resources/views/*.blade.php --indent-size 2 --wrap-line-length 100 --write
```

```bash
blade-formatter resources/views/*.blade.php --sort-tailwindcss-classes --tailwindcss-config-path ./tailwind.config.js --write
```

```bash
blade-formatter resources/views/*.blade.php --sort-html-attributes alphabetical --write
```

```bash
blade-formatter "resources/**/*.blade.php" \
  --write \
  --indent-size 2 \
  --wrap-attributes force-aligned \
  --sort-tailwindcss-classes \
  --no-multiple-empty-lines \
  --end-of-line LF
```

```bash
echo '@if($user) <p>{{ $user->name }}</p> @endif' | blade-formatter --stdin
```

```bash
docker run -it -v $(pwd):/app -w /app shufo/blade-formatter resources/**/*.blade.php
```

```bash
docker run -it -v $(pwd):/app -w /app shufo/blade-formatter resources/**/*.blade.php --write
```

```bash
docker run -it -v $(pwd):/app -w /app shufo/blade-formatter \
  "resources/**/*.blade.php" \
  --write \
  --indent-size 2 \
  --sort-tailwindcss-classes
```

--------------------------------

### Define Blade Formatter settings in JSON configuration file

Source: https://context7.com/shufo/blade-formatter/llms.txt

Create a .bladeformatterrc.json file to specify project-wide formatting rules such as indentation, line length, Tailwind CSS integration, and attribute sorting. The configuration is read automatically by the formatter.

```json
{
  "indentSize": 4,
  "wrapAttributes": "auto",
  "wrapLineLength": 120,
  "wrapAttributesMinAttrs": 2,
  "indentInnerHtml": true,
  "endWithNewLine": true,
  "endOfLine": "LF",
  "useTabs": false,
  "sortTailwindcssClasses": true,
  "tailwindcssConfigPath": "./tailwind.config.js",
  "sortHtmlAttributes": "none",
  "customHtmlAttributesOrder": ["id", "class", "name", "type", "value"],
  "noMultipleEmptyLines": false,
  "noPhpSyntaxCheck": false,
  "noSingleQuote": false,
  "noTrailingCommaPhp": false,
  "extraLiners": ["head", "body", "/html"],
  "componentPrefix": ["x-", "livewire:"],
  "phpVersion": "8.4"
}
```

--------------------------------

### Custom HTML attribute sorting via CLI and JSON configuration

Source: https://context7.com/shufo/blade-formatter/llms.txt

Configure custom sorting order for HTML attributes either through CLI flags or JSON settings. Supports regex patterns for flexible attribute matching.

```bash
blade-formatter resources/views/*.blade.php \
  --sort-html-attributes custom \
  --custom-html-attributes-order "id,class,data-.*,name,type,value,href,src" \
  --write
```

```json
{
  "sortHtmlAttributes": "custom",
  "customHtmlAttributesOrder": [
    "id",
    "class",
    "^data-",
    "^aria-",
    "name",
    "type",
    "value",
    "placeholder",
    "href",
    "src",
    "alt",
    "^@click",
    "^@submit",
    "^x-"
  ]
}
```

--------------------------------

### Blade Ignore File Example (.bladeignore)

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Shows the format of a `.bladeignore` file used to specify files and directories that should be ignored by the blade formatter. It uses glob patterns similar to `.gitignore` to exclude specific files or all files within directories from formatting.

```gitignore
resources/views/users/index.blade.php
resources/views/products/*
resources/views/books/**/*
```

--------------------------------

### Set npm global user to root

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

This command resolves permission issues encountered during global installation of blade-formatter. It configures npm to use root user for global operations, which can fix 'nobody does not have permission' errors.

```bash
$ npm -g config set user root
```

--------------------------------

### Format Blade templates using ESModule

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

This snippet shows how to use the BladeFormatter API in an ESModule environment. It formats HTML/Blade content with configurable indent size. Requires ESModule support and the blade-formatter package to be installed.

```javascript
import { Formatter } from "blade-formatter";

const input = `
<html>
  <body>
    <p>foo</p>
  </body>
</html>
`;

const options = {
    indentSize: 2,
};

new Formatter(options).formatContent(input).then((formatted) => {
    console.log(formatted);
});
```

--------------------------------

### Disable Blade Formatter inline using Blade comments

Source: https://context7.com/shufo/blade-formatter/llms.txt

Use Blade comment directives to temporarily disable formatting for sections or lines within a template. Helpful for preserving custom formatting or code snippets.

```blade
{{-- blade-formatter-disable --}}
<div>
    {{ $unformatted }}
    {{ $code }}
</div>
{{-- blade-formatter-enable --}}

<div>
    {{-- This will be formatted --}}
    {{ $formatted }}
</div>

{{-- blade-formatter-disable-next-line --}}
    {{ $keepThisLineAsIs }}

{{ $thisWillBeFormatted }}
```

--------------------------------

### Format Blade templates using CommonJS

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

This snippet demonstrates how to use the BladeFormatter API in a CommonJS environment. It allows formatting HTML/Blade content with configurable options like indent size and attribute wrapping. Requires the blade-formatter package to be installed.

```javascript
const { BladeFormatter } = require('blade-formatter');

const input = `
<html>
  <body>
    <p>foo</p>
  </body>
</html>
`;

const options = {
  indentSize: 4,
  wrapAttributes: "auto",
  wrapLineLength: 120,
  endWithNewLine: true,
  useTabs: false,
  sortTailwindcssClasses: true,
};

new BladeFormatter(options).format(input).then((formatted) => {
  console.log(formatted);
});
```

--------------------------------

### Run tests with Docker

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

These commands build and test the project using Docker. The debug command allows attaching to the container for troubleshooting. Useful for ensuring consistent test results across different environments.

```bash
$ make build
$ make test
$ make debug # attach
```

--------------------------------

### Show diffs with blade-formatter

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Formats specified blade template files and displays the differences (diffs) between the original and formatted versions. This is useful for code reviews or understanding the impact of the formatter.

```bash
$ blade-formatter -c -d resources/**/*.blade.php
```

--------------------------------

### Format files using blade-formatter CLI

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Formats specified blade template files and outputs the formatted result to standard output. This command is useful for integrating into scripts or for reviewing formatted code before writing it to files.

```bash
# This outputs formatted result to stdout
$ blade-formatter resources/**/*.blade.php
$ blade-formatter resources/layouts/app.blade.php
```

--------------------------------

### Configure package for ESModule support

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

This configuration enables ESModule support in Node.js projects. It's required when using ESModule syntax in files like tailwind.config.js. The setting should be added to package.json.

```json
"type": "module"
```

--------------------------------

### Tailwind CSS configuration for CommonJS

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

This is the required Tailwind CSS configuration format when using CommonJS. It uses module.exports syntax which is compatible with CommonJS environments. Should be saved as tailwind.config.js.

```javascript
module.exports = {
  ~~~
}
```

--------------------------------

### Format and overwrite files with blade-formatter

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Formats specified blade template files and overwrites them with the formatted content. Use this command when you are confident in the formatting and want to apply changes directly to your files.

```bash
$ blade-formatter --write resources/**/*.blade.php
```

--------------------------------

### Tailwind CSS configuration for ESM

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

This is the required Tailwind CSS configuration format when using ESModule. It uses export default syntax which is compatible with ESModule environments. Should be saved as tailwind.config.js.

```javascript
export default {
  ~~~
}
```

--------------------------------

### Check formatting status with blade-formatter

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Checks if blade template files are formatted correctly without making any changes. It returns an exit code of 1 if any files are not formatted, indicating that the formatter needs to be run.

```bash
$ blade-formatter app/** -d -c
Check formatting...
app/index.blade.php

Above file(s) are formattable. Forgot to run formatter? Use --write option to overwrite.
$ echo $?
```

--------------------------------

### Disable Blade Formatting with Blade Comments

Source: https://github.com/shufo/blade-formatter/blob/main/README.md

Illustrates how to disable code formatting within Blade files using special Blade comments. `blade-formatter-disable` and `blade-formatter-enable` comments can bracket sections of code to be excluded from formatting. `blade-formatter-disable-next-line` can be used to skip formatting for a single subsequent line.

```blade
{{-- blade-formatter-disable --}}
    {{ $foo }}
    {{ $bar }}
{{-- blade-formatter-enable --}}
```

```blade
{{-- blade-formatter-disable-next-line --}}
    {{ $foo }}
```

```blade
{{-- blade-formatter-disable --}}

{{ $foo }}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.