How to suppress SCSS linting for 1 line in VS Code?

Question

I've written an SCSS mixin for creating a series of @container rules:

@mixin form-grid-double-size-breakpoint($itemSize, $gapSize) {
  $breakPoint: $gapSize + $itemSize * 2;

  @container customcontainername (min-width: #{$breakPoint}) {
    // Styles specific for this container width
  }
}

The problem is with the interpolation hash-and-curlies that insert the computed breakpoint width. These are necessary to get the @container rule to work. It is valid SCSS code that compiles well and runs as expected. However, in VisualStudio Code, it is regarded as invalid code:

"code": "css-lcurlyexpected",
"message": "{ expected",

"code": "css-ruleorselectorexpected",
"message": "at-rule or selector expected",

So I would like to get rid of this misleading error message in VS Code, but can't find a description of what linter is responsible for this and how to disable/suppress this faulty error message.

I have tried all sorts of SCSS alternatives, like (string.)unquote, putting the hash-and-curlies within the variable declaration, etc. But then the @container query becomes invalid.

Any help will be highly appreciated,

Michel

Answer 1

There is a trouble ticket in VS Code for them to support the new CSS @container queries. https://github.com/microsoft/vscode/issues/170589

A temporary workaround for VS Code is to install the stylelint VS Code extension and add stylelint and stylelint-config-standard-scss to your project's node modules as dev dependencies.

You can then change your settings so stylelint is the default formatter and linter for SCSS files. You can add these VS Code configurations setting where you see fit: either globally or per-project. Look up VS Code documentation on how to change these settings.

{  
  // START: vscode-stylelint plugin settings
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  "stylelint.validate": ["css", "scss"],
  "stylelint.customSyntax": "postcss-scss",
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
  // END: vscode-stylelint plugin settings
}

This should help you as you wait for VS Code to update. However, you might actually end up preferring stylelint in the long run. I'm a fan of stylelint and its stylelint-config-idiomatic-order plugin.