5

VScode doesn't show me any stylint errors.

package.json:

    ...
    "postcss": "^8.4.12",
    "postcss-scss": "^4.0.3",
    "stylelint": "^14.7.1",
    "stylelint-config-sass-guidelines": "^9.0.1",

.stylelintrc.json:

{
    "extends": "stylelint-config-sass-guidelines",
    "files": ["**/*.scss"],
    "customSyntax": "postcss-scss",
    "rules": {
        "color-named": "always-where-possible",
        "max-nesting-depth": 5,
        "selector-max-compound-selectors": 6,
        "selector-no-qualifying-type": [
            true,
            {
                "ignore": ["attribute", "class", "id"]
            }
        ],
        "selector-max-id": 1,
        "no-extra-semicolons": true
    }    
}

vscode settings.json

    ...
    "stylelint.enable": true,
    "css.validate": false,
    "scss.validate": false,
    "less.validate": false,

Thats all i have configured. Im on vscodestylelint 1.2.2. Stylelint it self works in console just fine, vscode just won't show any errors.

EKnot
  • 151
  • 1
  • 9

3 Answers3

11

Like Stylelint itself, the Stylelint VS Code extension only lints CSS by default. You must configure the extension to lint other languages like SCSS using the stylelint.validate property:

// vscode settings.json
...
"css.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"],

This will turn off VS Code's built-in validator for CSS and SCSS, and then turn on Stylelint for them.

jeddy3
  • 3,451
  • 1
  • 12
  • 21
4

In my case this didn't work because I also had

"stylelint.config": {},

in settings.json, and once I changed it to

"stylelint.config": null,

it started working

emir
  • 1,336
  • 1
  • 14
  • 33
  • Thank you! Removing the line entirely also worked for me. There's a link in the Stylelint extension settings under "Config" named "Edit in settings.json" which appears to create this, which disables linting by default, and overrides settings in `.stylelintrc` – xec Apr 27 '23 at 13:42
0

The fix for me was to include postcss as a value for stylelint to validate, since I'm using postcss. I thought just including the [ "css", "scss" ], values would work since those are the file extensions I'm using but I guess it's the technology being used?

Anyway in VS Code settings add/edit the stylelint.validate option to:

"stylelint.validate": [ "css", "scss", "postcss" ],
mae
  • 1