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".
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.