How to Edit Auto-Formatting Rules for CSS/SCSS/LESS using Prettier in VSCode?

Question

Background:

I'm using Prettier - Code formatter extension for VSCode to auto-format my code on save.

Problem:

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

Update:

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.

Answer 1

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

Answer 2

Solution:

In order to allow single-line blocks in VSCode using Prettier - Code formatter extension, please take the following steps:

1. Enable stylelint integration by adding this in the VSCode Settings (JSON): "prettier.stylelintIntegration": true
2. Install stylelint and stylelint-prettier npm modules in your project directory. npm install stylelint stylelint-prettier --save-dev
3. 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.