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

Question

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.

Answer 1

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.

Answer 2

I am new to all of this, but might be able to help. I have been working on getting stylelint to autofix on save for just CSS. I have a .stylelintrc file in my project folder with all of my rules. The settings.json to stop Prettier from overriding:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[css]": {
        "editor.defaultFormatter": null,
        "editor.formatOnSave": false
    },
    "editor.formatOnSave": true,
    "prettier.useTabs": true,
    "prettier.proseWrap": "never",
    "prettier.printWidth": 300,
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    }
}

Its working for me so far!