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.

score 4 · Accepted Answer · answered Apr 23 '21 at 17:30

4

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.

answered Apr 23 '21 at 17:30

jeddy3

3,451
1
12
21

This definitely does the job, but I would prefer the new-lines to happen when needed. I feel like I need to cancel format on save and format manually :( – drewkiimon Apr 26 '21 at 15:18
1

Prettier is an opinionated formatter (https://prettier.io/docs/en/option-philosophy.html). If you're using Prettier, I suggest embracing however it formats your CSS. If you'd prefer more control, then I suggest not using Prettier for your CSS and using stylelint to fix any stylistic issues, as it has a large set of configuration options. – jeddy3 Apr 26 '21 at 15:46
1

Stylelint is very much supported. There's was a major release (14.0.0) on Oct 21 2021 that was the accumulation of 8 months of work. New releases are put out regularly: https://github.com/stylelint/stylelint/releases – jeddy3 Mar 10 '22 at 11:27
1

As of Stylelint v15 all style-related rules have been deprecated. If you are using v15 or higher and are not making use of these deprecated rules, this plugin is no longer necessary. – Eldin Z May 10 '23 at 14:24

score 0 · Answer 2 · answered Apr 23 '21 at 18:44

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!

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

2 Answers2