CODEWITHSUNDEEP
visual-studio-codelintprettierstylelint
kanlukasz
kanlukasz

Reputation: 1314

How to use VSCode Prettier 3 formatting with stylelint

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

Upvotes: 6

Views: 10356

Answers (1)

kanlukasz
kanlukasz

Reputation: 1314

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

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)

Upvotes: 13

Related Questions