How to Edit Auto-Formatting Rules for CSS/Scss/Less Using Prettier in Vscode

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

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.

Format SCSS/CSS/LESS with Prettier with rules of Stylelint

You can integrate Prettier with stylelint by turning off the conflicting stylelint rules using the stylelint-config-prettier shared config.

For example:

// .stylelintrc
{
  "extends": [
    "stylelint-config-standard" // or whatever config you're using
    "stylelint-config-prettier"
  ]
}

Prettier will then be responsible for the bulk of the formatting, and stylelint will be responsible for checking for possible errors and limiting languages features.

How to make vscode format SCSS calc function properly

You can use Stylelint and the following two rules:

• function-calc-no-unspaced-operator
• function-whitespace-after

These will flag the lack of space before and after the + operator, respectively. See this demo.

This rules are turned on the SCSS standard config, which you can extend in your Stylelint configuration object:

{
  "extends": "stylelint-config-standard-scss"
}

How would i instruct VSCODE to created spaces around the operator upon save

You can use the editor.codeActionsOnSave option from the official Visual Studio Code extension for Stylelint. And the following to your VS Code settings file:

  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }

How to use VSCode Prettier 3 formatting with stylelint

You can check the answer to this problem on github, where I made a ticket some time ago:

https://github.com/prettier/prettier-vscode/issues/1051

---

I now have a better solution for using stylelint in VSCode:

I have a better option to use the stylelint, because the stylelint owner have created the official VSCode plugin!

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

The plugin works almost out of the box. What you need to do is set up. You can use just settings.json in VSCode. Small example:

"stylelint.config": {
    "rules": {
        "at-rule-name-case": "lower",
        "at-rule-name-space-after": "always-single-line",
        "at-rule-semicolon-newline-after": "always",
    }
}

Do you need a ready-to-use configuration?

No problem - you have to check this

• https://github.com/stylelint/stylelint-config-standard
• https://github.com/stylelint/stylelint-config-recommended

Do you need Formatting option (Shift + Alt + F)?

No problem. You can define keybinding for option Fix all auto-fixable problems. For example:

{
    "key": "alt+shift+f",
    "command": "stylelint.executeAutofix",
    "when": "editorTextFocus && editorLangId == 'css'"
},
{
    "key": "alt+shift+f",
    "command": "stylelint.executeAutofix",
    "when": "editorTextFocus && editorLangId == 'scss'"
},
{
    "key": "alt+shift+f",
    "command": "stylelint.executeAutofix",
    "when": "editorTextFocus && editorLangId == 'less'"
}

Remember that not all stylelint options are available for autofixing (but most are)

---

Related Topics