Solution:
In order to allow single-line blocks in VSCode using Prettier - Code formatter extension, please take the following steps:
- Enable stylelint integration by adding this in the VSCode Settings (JSON):
"prettier.stylelintIntegration": true - Install stylelint and stylelint-prettier npm modules in your project directory.
npm install stylelint stylelint-prettier --save-dev - Add a .stylelintrc.json file at the root of your project directory with the following code:
{
"plugins": ["stylelint-prettier"],
"rules": {
"block-closing-brace-newline-after": "always-multi-line",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-space-before": "always",
"block-opening-brace-space-after": "always",
"block-opening-brace-space-before": "always",
"block-closing-brace-newline-before": "always-multi-line",
"block-opening-brace-newline-after": "always-multi-line",
"indentation": 4
}
}
You can add/customize more stylelint rules, see the entire list of rules here.
Took me a while to understand how to configure these options, if you're starting out with stylelint, I highly recommend you read its guidelines first.
Answer from Arslan Akram on Stack OverflowSolution:
In order to allow single-line blocks in VSCode using Prettier - Code formatter extension, please take the following steps:
- Enable stylelint integration by adding this in the VSCode Settings (JSON):
"prettier.stylelintIntegration": true - Install stylelint and stylelint-prettier npm modules in your project directory.
npm install stylelint stylelint-prettier --save-dev - Add a .stylelintrc.json file at the root of your project directory with the following code:
{
"plugins": ["stylelint-prettier"],
"rules": {
"block-closing-brace-newline-after": "always-multi-line",
"block-closing-brace-empty-line-before": "never",
"block-closing-brace-space-before": "always",
"block-opening-brace-space-after": "always",
"block-opening-brace-space-before": "always",
"block-closing-brace-newline-before": "always-multi-line",
"block-opening-brace-newline-after": "always-multi-line",
"indentation": 4
}
}
You can add/customize more stylelint rules, see the entire list of rules here.
Took me a while to understand how to configure these options, if you're starting out with stylelint, I highly recommend you read its guidelines first.
I haven't known that vscode have that feature. One simple solution probably by specifying prettier-ignore?
/* prettier-ignore */
.some-class { background: #f00; }
Reference:
- https://prettier.io/docs/en/ignore.html#css
Yes, try installing vscode-css-formatter extension.
It just adds the functionality to format .css files and the shortcut stays the same Alt+Shift+F.
Beautify css/sass/scss/less
to run this
enter alt+shift+f
or
press F1 or ctrl+shift+p
and then enter beautify ..

an another one - JS-CSS-HTML Formatter
i think both this extension uses js-beautify internally
It turns out this was due to a seemingly-unrelated formatter:
JS-CSS-HTML Formatter
I'd forgotten I had this installed (I have about 100 extensions). Sadly, this doesn't mention SCSS or SASS anywhere in its profile. But it does mention it in a changelog update in 2016. Silly me.
I've uninstalled this extension and that's stopped the annoying formatting. I'm sure it's good at it's job, but it isn't obvious that it's doing anything and this made the problem really hard to find.
It did make me have a much-needed clean-out of my extensions, though.
I fixed this temporarily by disabling the format on the auto save option.
Go to View -> "Command Pallet" and type "Formatter Config" and change the value to "false" of the "onSave" option to restart the visual code.


But whenever you need to format the specific page you can go to the 'Command Pallet' and run "Formatter" command.