How to use VSCode Prettier 3 formatting with stylelint

Question

To be honest I can't understand the documentation or i miss something. It drives me crazy 😑

Steps that i did:

1. Installed VSCode
2. Installed Prettier plugin
3. Opened simply project with couple files (html, css)
4. Installed stylelint with npm install --save-dev stylelint
5. Installed stylelint-prettier with npm install --save-dev stylelint-prettier prettier
6. Created .stylelintrc with content:

{
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true,
    "comment-empty-line-before": "always",
  }
}   

And what now? Prettier in VSCode didn't fix anything in css files Or maybe I do it completely wrong?

I'm working on Windows 10 machine

Telephonic

Answer 1

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)

Telephonic

Thank you so much! Do you know how can I enable it for scss files? It's only working with .css and not .scss and I couldn't understand the stylelint docs. – Padgett

Just found it and edited your answer! – Padgett