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...)
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"
}
}]
}
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.