1

I have an app that uses Stylelint to enforce stylistic rules inside styles, but here, Stylelint complains about indentation when a long line is split in half by Prettier.

@include box-shadow(
  var(--shadow-offset) var(--shadow-offset) 0 var(--shadow-spread)
    $color-white, // complains here about 2 extra whitespaces
  var(--shadow-offset) var(--shadow-offset) $color-red
);

raises this error Expected indentation of 8 spaces (indentation)

I tried /* stylelint-disable-line indentation */ /* stylelint-disable-line */ only /* stylelint-disable */ gets rid of the "error".

Théo Lavaux
  • 1,364
  • 3
  • 22
  • 46

1 Answers1

1

When using Prettier alongside Stylelint, you should extend the appropriate Prettier shared config, e.g. stylelint-config-prettier-scss, in your Stylelint configuration:

{
  "extends": [
    "stylelint-config-standard-scss"
    "stylelint-config-prettier-scss"
  ]
}

This config turns off all the rules that conflict with Prettier. It should be placed last in the extends array.

Prettier is then responsible more enforcing stylistic conventions, like whitespace, and Stylelint is focused on helping you avoid errors and enforce non-stylistic conventions, e.g. what units you want to allow in your codebase.

jeddy3
  • 3,451
  • 1
  • 12
  • 21
  • This is my stylelint config https://gist.github.com/theolavaux/66d67078232e08f1f159bd1125260fed – Théo Lavaux Jun 08 '22 at 12:13
  • I already have `"stylelint-config-prettier"` inside `extends` – Théo Lavaux Jun 08 '22 at 12:31
  • It needs to be the last config in the extends array (as, in your case, the indentation rule is being turned on in the stylelint-config-standard-scss config). I've updated my answer to make this clearer. You'll also want to extend stylelint-config-prettier-scss, rather than stylelint-config-prettier. – jeddy3 Jun 08 '22 at 12:46