[Need help] Use Prettier 3 with stylelint

Can someone show me how it works or how should I install it? To be honest, I don’t understand the documentation or I miss something. It drives me crazy 🙄

Steps that i did:

1. Installed VSCode
2. Installed Prettier Vs Code 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 don’t understand this

Sorry, i know, it’s repository, not a help page, but please help me if you can

I’m working on Windows 10 machine

[joemaller]

For the sake of sanity and memorializing hours lost to this, some confusion about this is justified.

• The first Linter Integrtation link in this project’s readme points to Prettier’s Integrating with Linters instructions page which says to use stylelint-prettier. 😭
• Then the next section of the readme, Linter Integration (advanced), says to use prettier-stylelint. 🎉

Additionally, like prettier-vscode, stylelint-prettier is a Prettier project and relatively active, while prettier-stylelint is independent and hasn’t been updated since September 2017. (I could quibble about the names too, Prettier’s project name start with “stylelint”?)

All that aside, prettier-stylelint (the independent one) works as described.

Here is a simplified, working example. (vscode 1.40.2, prettier-vscode 3.11.0, macOS 10.15.1)

Note: You might need to reload the VS Code window to get this working.

package.json

{
  [name, description, etc...],
  "devDependencies": {
    "prettier": "^1.19.1",
    "prettier-stylelint": "^0.4.2",
    "stylelint": "^12.0.0"
  },
  "stylelint": {
    "rules": {
      "comment-empty-line-before": "always"
    }
  }
}

Ugly input css

.a {color:       tomato;
  /* comment */
 padding: 2px; margin: 4px;}

Resulting CSS after running Format Document (alt-shift-f):

.a {
  color: tomato;

  /* comment */
  padding: 2px;
  margin: 4px;
}

[ntotten]

As was mentioned above, you need to install prettier-stylelint. stylelint-prettier is a completely different thing.