I'm using Prettier - Code formatter extension for VSCode to auto-format my code on save.
I'm used to writing single-line blocks in my sass files (where there's only a single property) i.e.
.some-class { background: #f00; }
Problem is the Prettier extension formats it to multi-lines i.e.
.some-class {
background: #f00;
}
It seems prettier uses stylelint for css/scss files and I've found these settings can be over-written by enabling this in the settings:
"prettier.requireConfig": true
and using a .prettierrc.js file but haven't been able to turn-off linting for single-line blocks. Would appreciate, if anybody here has any fixes for this.
Thanks
The settings can't be over-written by "prettier.requireConfig": true
. The Prettier - Code formatter extension for VSCode doesn't have an option to edit stylesheets linting from VSCode Settings.
However, there is an option to enable stylelint integration but this requires stylelint and stylelint-prettier npm modules.
Prettier by default uses standard stylelint configuration for stylesheet linting and formatting.
Posted the solution below.
In order to allow single-line blocks in VSCode using Prettier - Code formatter extension, please take the following steps:
"prettier.stylelintIntegration": true
npm install stylelint stylelint-prettier --save-dev
{
"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.