如何在VS Code中抑制1行的SCSS linting?

piwo6bdm  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(120)

我写了一个SCSS mixin,用于创建一系列@container规则:

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

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

问题在于插入计算出的断点宽度的插值散列和 curl 。这些都是让@container规则工作所必需的。它是编译良好并按预期运行的有效SCSS代码。但是,在VisualStudio Code中,它被视为无效代码:

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

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

所以我想摆脱这个误导性的错误消息在VS代码,但找不到一个描述什么linter是负责这和如何禁用/抑制这个错误的错误消息。
我已经尝试了各种SCSS替代方案,如(string.)unquote,将hash-and-curlies放在变量声明中,等等。但是这样@container查询就无效了。
我们将非常感谢您的帮助,
米歇尔

mitkmikd

mitkmikd1#

在VS Code中有一个故障单,用于支持新的CSS @container查询。https://github.com/microsoft/vscode/issues/170589
VS Code的临时解决方法是安装stylelint VS Code扩展,并将stylelintstylelint-config-standard-scss作为开发依赖项添加到项目的节点模块中。
然后可以更改设置,使stylelint成为SCSS文件的默认格式化程序和linter。您可以在您认为合适的位置添加以下VS Code配置设置:无论是全球性的还是每个项目的。查找VS Code文档,了解如何更改这些设置。

{  
  // 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
}

这应该有助于您等待VS代码更新。然而,从长远来看,您可能最终更喜欢stylelint。我是stylelint及其stylelint-config-idiomatic-order插件的粉丝。

相关问题