1

I'm trying to configure a visual studio code project to format SCSS code according to WordPress standards. So far I've done the following but no indication of errors and no formatting occurs on save.

Installed the stylelint extension, also have prettier installed.

Installed the stylelint-config package:
npm install @wordpress/stylelint-config --save-dev

Added the following lines to package.json to format SCSS:

"stylelint": {
"extends": "@wordpress/stylelint-config/scss"
},

No errors are displayed and no formatting is corrected on save.

I have 'format on save' enabled.

As I want stylelint to format the code, I've added the following lines to settings.json to use stylelint instead of prettier for formatting SCSS:

"[scss]": {
        "editor.formatOnSave": false,
        "editor.codeActionsOnSave": {
            "source.fixAll.stylelint": true
        }
    }

Now I'm stuck for what to try.

Anyone got any ideas?

In case it's relevant, I'm using Windows 8.1.

Steve

Steve
  • 43
  • 6

1 Answers1

1

The official Stylelint VS Code extension will only lint CSS and PostCSS by default.

You should use specify "scss" the stylelint.validate property:

{
  "stylelint.validate": ["css", "scss"]
}

You can then use the ignoreFiles configuration property to ignore files you don't want to lint, e.g.:

"stylelint": {
  "extends": "@wordpress/stylelint-config/scss",
  "ignoreFiles": ["build/*.css"]
},
jeddy3
  • 3,451
  • 1
  • 12
  • 21
  • Thank you jeddy3, that worked a treat :-) – Steve Feb 22 '22 at 15:28
  • I still get errors in the generated CSS file, for example: Expected single space before "{" "Expected single space after ":" etc. – Steve Feb 22 '22 at 16:39
  • Please accept the answer if it addressed your question. – jeddy3 Feb 23 '22 at 10:06
  • This still does not solve the problem on my end. I see errors when I run it in CLI, but the extension is not reporting any error. – emir Jun 22 '22 at 10:15