Search code examples
csssasslessprettierstylelint

Format SCSS/CSS/LESS with Prettier with rules of Stylelint

Right now, I'm trying to format my SCSS code with Prettier, with the rules of Stylelint. I'm having a hard time getting these two to line up.

For example, I keep getting declaration-colon-new-line error with stylelint (which is correct) for the following scss code:

background-image: linear-gradient(45deg, transparent 50%, #263b59 50%),
    linear-gradient(135deg, #263b59 50%, transparent 50%),
    radial-gradient(transparent 0%, transparent 0%);

It should look like the following (or something to satisfy the rule) after being formatted with Prettier, but I cannot find the options or how to do so:

background-image: 
    linear-gradient(45deg, transparent 50%, #263b59 50%),
    linear-gradient(135deg, #263b59 50%, transparent 50%),
    radial-gradient(transparent 0%, transparent 0%);

Can anyone please help me get Prettier to auto-format things with the rules of Stylelint? I'm very new to this so a little lost.

Solution

  • You can integrate Prettier with stylelint by turning off the conflicting stylelint rules using the stylelint-config-prettier shared config.

    For example:

    // .stylelintrc
{
  "extends": [
    "stylelint-config-standard" // or whatever config you're using
    "stylelint-config-prettier"
  ]
}

    Prettier will then be responsible for the bulk of the formatting, and stylelint will be responsible for checking for possible errors and limiting languages features.