Js-beautify: HTML "select" tags have too much indentation

Created on 3 Jan 2017 · 5Comments · Source: beautify-web/js-beautify

HTML "select" tags have too much indentation.

Input

The code looked like this before beautification:

<select class="col-4 form-input" ng-model="info.dateRange" ng-init="info.dateRange = 'last24'">
        <option selected="selected" value="last24">{{"dashboard_records_text_7" | translate}}</option>
        <option value="last7">{{"dashboard_records_text_8" | translate}}</option>
        <option value="custom">{{"dashboard_records_text_9" | translate}}</option>
    </select>

Expected Output

The code should have looked like this after beautification:

<select class="col-4 form-input" ng-model="info.dateRange" ng-init="info.dateRange = 'last24'">
    <option selected="selected" value="last24">{{"dashboard_records_text_7" | translate}}</option>
    <option value="last7">{{"dashboard_records_text_8" | translate}}</option>
    <option value="custom">{{"dashboard_records_text_9" | translate}}</option>
</select>

Actual Output

The code actually looked like this after beautification:

<select class="col-4 form-input" ng-model="info.dateRange" ng-init="info.dateRange = 'last24'">
        <option selected="selected" value="last24">{{"dashboard_records_text_7" | translate}}</option>
        <option value="last7">{{"dashboard_records_text_8" | translate}}</option>
        <option value="custom">{{"dashboard_records_text_9" | translate}}</option>
    </select>

Environment

OS: Mac
Version tested with: 1.6.7

Settings

Example:

var options = {
    "wrap_line_length": 80,
    "indent_handlebars": true
};

html bug

Source

knocte

Most helpful comment

select is an unformatted tag by default. This isn't a bug. Add the following to your options:

    "unformatted": ["a", "abbr", "area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite", "code", "data",
        "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "map",
        "mark", "math", "meter", "noscript", "object", "output", "progress", "q", "ruby", "s", "samp", "small", "span",
        "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var", "video", "wbr", "text", "acronym",
        "address", "big", "dt", "ins", "strike", "tt"]

HookyQR on 11 Feb 2017

👍2

All 5 comments

select is an unformatted tag by default. This isn't a bug. Add the following to your options:

    "unformatted": ["a", "abbr", "area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite", "code", "data",
        "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "map",
        "mark", "math", "meter", "noscript", "object", "output", "progress", "q", "ruby", "s", "samp", "small", "span",
        "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var", "video", "wbr", "text", "acronym",
        "address", "big", "dt", "ins", "strike", "tt"]

HookyQR on 11 Feb 2017

👍2

Oxicode on 4 Jul 2017

Fixed in 1.8.0-rc4 using the new inline setting.
@HookyQR
Unformatted no longer needed.

bitwiseman on 12 Aug 2018

Any timeline for a 1.8.0 release. Would love to update the VS Code extension, but waiting for the -rc to drop off.

HookyQR on 12 Aug 2018

@HookyQR
The main problem we have here is lack of feedback and breadth of inputs.
I've had some people provide very useful bugs on the rc. 1.8.0 is a
massive change so if you have any test inputs or can run some tests or get
some more folks to give it a try.

One key change is the addition of the "inline" and "content_unformatted"
options which mostly supercede the "unformatted" option.

On Sun, Aug 12, 2018, 3:49 AM HookyQR notifications@github.com wrote:

Any timeline for a 1.8.0 release. Would love to update the VS Code
extension, but waiting for the -rc to drop off.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/beautify-web/js-beautify/issues/1097#issuecomment-412334386,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB3kKVMsFYmS-RylfG4Ns8TFZjHYydyfks5uQAg7gaJpZM4LZUVq
.