[Need help] Use Prettier 3 with stylelint

[kanlukasz]

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

[cpboyd]

@kanlukasz Have you tried prettier-stylelint instead of stylelint-prettier since that's what this plugin suggests using?

[ntotten]

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

[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;
}

[SharakPL]

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

Sorry but this is confusing and really frustrating. I checked prettier-stylelint and it doesn't work. stylelint-prettier did work, but required "prettier.stylelintIntegration": true in VSCode. Now this config is actively blocked so nothing works until I remove it, but then only prettier built-in rules are applied and .stylelintrc is ignored completely with autofix on save. Stylelint still works as expected including order rules, but prettier doesn't fix it.

Would you mind sharing a config to make it work as expected and fix errors and apply order based on stylelint-config-twbs-bootstrap. Here's my previously working .stylelintrc.json:

{
  "extends": ["stylelint-config-twbs-bootstrap/scss"],
  "plugins": [
    "stylelint-prettier"
  ],
  "rules": {}
}

For now I'm forced to revert back to v.2.3.0.

[joemaller]

@SharakPL Check that your config still works using just the Stylelint CLI. I was using some ordering configs which were having trouble after Stylelint's v12 release. It's also a good idea to remove the node_modules folder and re-install, I got stuck (for too long) with an outdated sub-dependency blocking a newer one.

The code in my comment above yours does work. It's obviously reduced, but I have been able to use this foundation with a larger stylelint config.

[SharakPL]

@joemaller as I mentioned before, stylelint works just fine, both CLI and through vscode extension. All errors and order warnings are linted, but prettier won't fix any of these and uses only its own rules. It works only with my above config, "prettier.stylelintIntegration": true in VSCode settings and prettier-vscode@2.3.0

Edit: Had to disable prettier for ignoring my stylelint config and am now using VSCode's built-in autofix functionality:

    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    },
    "editor.codeActionsOnSaveTimeout": 5000,

[kanlukasz]

Update - now stylelint has released an official vs code plugin. No more configuration problems, etc.
More info:
https://stackoverflow.com/questions/58836612/how-to-use-vscode-prettier-3-formatting-with-stylelint/59752415#59752415

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.