visual-studio-code - 如何使 vscode 格式的 SCSS calc 正常运行

Question

我有一个包含 calc() 函数的 SCSS 文件。当我使用运算符周围没有空格的 calc 函数时 calc(var(--primary-color-h)+5)，转换后的 CSS 结果不起作用。只有当我在操作员周围设置空格时，它才会起作用；像这样 calc(var(--primary-color-h) + 5) 我将如何指示 VSCODE 在保存时在运算符周围创建空间。我安装了更漂亮的 scss Formatter 和 StyleLint。但似乎都没有解决它。tnx, RDG

标签： visual-studio-codestylelintscss-lint

Answer 1

您可以使用 Stylelint 和以下两条规则：

• 函数计算无无空格运算符
• 功能空白后

这些将分别标记运算符前后的空间不足+。请参阅此演示。

此规则已启用SCSS 标准配置，您可以在 Stylelint 配置对象中扩展它：

{
  "extends": "stylelint-config-standard-scss"
}

我将如何指示 VSCODE 在保存时在操作员周围创建空间

您可以使用Stylelinteditor.codeActionsOnSave的官方 Visual Studio Code 扩展中的选项。以下是您的 VS Code 设置文件：

  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }