Search code examples
formattinglessvisual-studio-codelintprettier

How to change Prettier behaviour on .less Files?


I am using Visual Studio Code and prettier in my Typescript project. It also formats less files.

What prettier does is putting every selector on a single line..

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4... {
    margin: 0;
    padding: 0;
}

Ends up as a very loooooooooooooong chain of selectors:

body,
div,
dl,
dt,
...
{
    margin: 0;
    padding: 0;
}

What I would like Prettier is, to just leave me alone (on this specific aspect. in .less files.) Keep them in a line (or several) if I wanted to. Or on multiple, if that is, what he finds:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4... {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

Btw: I can „prove“, that only prettier has a hand in this, not any built-in stuff in vscode or my tslint, by putting a // prettier-ignore line before those selectors. That would also be a local fix, but I want a more general solution... without having to throw anti-linter comments at all of this...)

update:

Maybe the solution is somewhere near pointing .less files to a different parser. However I can't find a single piece of sample code, how to tell prettier my postcss-Preferences then...

{
    "singleQuote": true,
    "printWidth": 140,
    "overrides": [{
        "files": "*.less",
        "options": {
            "parser": "postcss"
        }
    }]
}

Solution

  • I don't see a way to prevent prettier from adding newlines to your selector list. There is a prettier-stylelint integration coming to vscode though, see support for prettier-stylelint in vscode.

    Stylelint extension for vsCode does have the option you need. newlines in selector lists : stylelint rule.

    selector-list-comma-newline-before : "never-multi-line"

    So you could just use stylelint instead of prettier. Or wait for the PR on the prettier-stlelint integration. It looks like it is very close.