如何在 VS 代码中抑制 1 行的 SCSS linting？答案

【问题标题】：How to suppress SCSS linting for 1 line in VS Code?如何在 VS 代码中抑制 1 行的 SCSS linting？
【发布时间】：2022-12-06 00:00:00
【问题描述】：

我写了一个 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
  }
}

问题在于插入计算的断点宽度的插值散列和卷曲。这些是使@container 规则起作用所必需的。它是有效的 SCSS 代码，可以很好地编译并按预期运行。但是，在 VisualStudio Code 中，它被视为无效代码：

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

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

所以我想在 VS Code 中摆脱这个误导性的错误消息，但是找不到关于什么 linter 对此负责以及如何禁用/抑制这个错误错误消息的描述。

我已经尝试了各种 SCSS 替代方案，例如 (string.)unquote，将散列和卷曲放在变量声明中等。但是 @container 查询变得无效。

任何帮助将不胜感激，

米歇尔

【问题讨论】：

标签： css visual-studio-code sass scss-mixins container-queries

【解决方案1】：

听起来 Visual Studio Code 正在使用 CSS linter 检查您的 SCSS 代码，而 linter 将散列和卷曲解释为语法错误。

要抑制此错误，您可以尝试使用 /* stylelint-disable */ 指令在 @mixin 声明上方添加注释。这应该告诉 linter 忽略 @mixin 中的样式。

例如：

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

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

或者，您可以尝试通过在文件顶部添加 /* stylelint-disable-all */ 注释来禁用整个文件的 CSS linter。

如果您使用不同的 linter，禁用它的具体步骤可能会有所不同。您可以尝试在文档中或在线查找有关禁用 linter 的信息。

【讨论】：