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.

Accustomed

Answer 1

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.

Accustomed

Update for Oct 2019: it seems you don't have to update the VSCode settings anymore. – Feliks

Prettier 3 have some changes. Please see changelog and consider to update your answer – Eskil

stylelintIntegration is no longer supported :( – Pasteurization

Answer 2

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

Oller

This doesn't work. Still formats. Also, not useful when there's multiple lines. I'm looking whether there's an option in prettier (in vscode) to use stylelint formatting rules – Accustomed

Answer 3

How to configure Visual Studio Code to format css/scss/less files:

1. Install Prettier extension
2. Open a css/scss/less file in visual studio
3. Press ctrl + p on your keyboard
4. VS will ask you to configure a tool to indent these files
5. Select Prettier from the list

Precatory