"expand-multiline" only on line length overflow

[akinuri]

Template

<div>
    <label for="email" class="form-label">{{ __('Email') }}</label>
    <input class="form-control" id="email" type="email" name="email" value="{{ old('email') }}" placeholder="[email protected]" minlength="8" maxlength="100" required autofocus />
    <x-validation-error name="email" />
</div>

Context (Environment)

If I try to format the above block of code, I get not so desireable result. For example, if I use

"bladeFormatter.format.wrapLineLength": 90,
"bladeFormatter.format.wrapAttributes": "auto",

I end up with this:

<div>
    <label for="email" class="form-label">{{ __('Email') }}</label>
    <input class="form-control" id="email" type="email" name="email"
        value="{{ old('email') }}" placeholder="[email protected]"
        minlength="8" maxlength="100" required autofocus />
    <x-validation-error name="email" />
</div>

I like to vertically stack the attributes if the opening tag line length exceeds the limit. So, trying the following:

"bladeFormatter.format.wrapAttributes": "force-expand-multiline",

outputs this:

<div>
    <label
        for="email"
        class="form-label"
    >{{ __('Email') }}</label>
    <input
        class="form-control"
        id="email"
        type="email"
        name="email"
        value="{{ old('email') }}"
        placeholder="[email protected]"
        minlength="8"
        maxlength="100"
        required
        autofocus
    />
    <x-validation-error name="email" />
</div>

Still, this is undesirable. There is no need to format each opening tag like this. The label doesn't exceed the limit (90) here. It just looks ugly and hard to follow/read.

The output I expect is:

<div>
    <label for="email" class="form-label">{{ __('Email') }}</label>
    <input
        class="form-control"
        id="email"
        type="email"
        name="email"
        value="{{ old('email') }}"
        placeholder="[email protected]"
        minlength="8"
        maxlength="100"
        required
        autofocus
    />
    <x-validation-error name="email" />
</div>

Is there a way to apply force-expand-multiline only if the line length exceeds the limit?

Using auto just wraps the current line to the next. I don't want that.

[shufo]

Hmm sorry, currently there's no way to change the Wrap method of an HTML Attribute based on specific conditions like line length.

If you don't want to change the Wrap method, you can specify wrapAttributes as preserve.

It will results like below

Input

<div>
    <label for="email" class="form-label">{{ __('Email') }}</label>
    <input class="form-control"
              id="email"
        type="email"
        name="email"
        value="{{ old('email') }}"
        placeholder="[email protected]"
        minlength="8"
        maxlength="100"
        required
        autofocus
    />
    <x-validation-error name="email" />
</div>

Output

<div>
    <label for="email" class="form-label">{{ __('Email') }}</label>
    <input class="form-control"
        id="email"
        type="email"
        name="email"
        value="{{ old('email') }}"
        placeholder="[email protected]"
        minlength="8"
        maxlength="100"
        required
        autofocus />
    <x-validation-error name="email" />
</div>

[Random72IsTaken]

Oh, shoot! I just posted another issue about discussing this! XD https://github.com/shufo/vscode-blade-formatter/issues/509

-My bad. 😅

[Random72IsTaken]

Hmm sorry, currently there's no way to change the Wrap method of an HTML Attribute based on specific conditions like line length.

But what about modifying force-aligned strategy to only put that ending > on a new line? Is it possible? As it could be a decent compromise, in my opinion! 🙂

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days