LESS mixin unexpected code formatting

[richmilns]

Using VSCode 1.66.0 and the new built-in LESS code formatting feature less.format.enable implemented by the JS Beautify library.

When using a LESS mixin that accepts CSS code rules as a parameter (this is used for media query mixins), the formatting when saved is a little unexpected. The formatting is consistent, but it is unusal.

Example code (expected formatting)

.example(@rules) {
    @rules();
}

.test {
    .example({
        color:red;
    });
}

Result after saving

.example(@rules) {
    @rules();
}

.test {
    .example( {
            color:red;
        }

    );
}

Similar issue reported a while back js-beautify issue 722

I've noticed that if you add the following to your settings.json file, the results are slightly better:

"less.format.newlineBetweenRules": false

This gives you formatting like:

.example(@rules) {
    @rules();
}

.test {
    .example( {
            color:red;
        }
    );
}

Apologies if this isn't the right place to report this, but as it was a new feature of VSCode I figured I'd start here.

[aeschli]

Thanks for the report. We depend on JS Beautify here, so please file issues there.
Maybe we need to disable the formatter again for LESS if LESS is outside the scope of JS Beautify.

[aeschli]

Thanks for the report. We depend on JS Beautify here, so please file issues there.
Maybe we need to disable the formatter again for LESS if LESS is outside the scope of JS Beautify.

[richmilns]

Thanks, can you please advise what the version of js-beautify is that comes with VSCode 1.66.0 ? I cannot seem to find this information anywhere.

The issue was moved to beautifier/js-beautify#2016