如何配置VSCode实现保存时自动为SCSS calc()函数的运算符添加空格

我之前也碰到过类似的头疼问题——calc()里运算符没空格确实会导致CSS解析失效，而且很多通用格式化工具默认不会处理这个细节。结合你的情况，StyleLint是最可靠的解决方案，因为它有专门针对calc()运算符空格的规则，还能配合VSCode实现保存自动修复。下面是具体步骤：

1. 配置StyleLint规则 #

首先确保你已经安装了必要的StyleLint依赖（如果没装，先在项目根目录运行）：

npm install stylelint stylelint-config-standard-scss stylelint-config-prettier --save-dev

然后在项目根目录创建/修改.stylelintrc.json文件，添加针对calc()的规则：

{
  "extends": [
    // 启用SCSS标准规则集
    "stylelint-config-standard-scss",
    // 禁用和Prettier冲突的规则，避免格式化冲突
    "stylelint-config-prettier"
  ],
  "rules": {
    // 强制calc()运算符两侧必须有空格，并且支持自动修复
    "function-calc-no-unspaced-operator": true
  }
}

这个规则会检测所有未加空格的calc()运算符，比如calc(var(--primary-color-h)+5)会被识别为错误，并且自动修复成calc(var(--primary-color-h) + 5)。

2. 配置VSCode保存自动修复 #

打开VSCode的settings.json（可以通过Ctrl+,打开设置，然后点击右上角的"打开设置(JSON)"按钮），添加以下配置：

{
  // 保存时自动触发StyleLint的修复动作
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  // 让StyleLint校验SCSS文件
  "stylelint.validate": ["css", "scss"],
  // 确保StyleLint插件启用
  "stylelint.enable": true
}

3. 为什么之前的插件没生效？ #

• Prettier：默认的CSS/SCSS格式化规则对calc()的空格处理不是强制的，除非你专门配置相关选项，但StyleLint的规则更精准。
• SCSS Formatter：这类插件通常只做基础的代码缩进、换行，没有针对calc()运算符的专项校验。

配置完成后，重启VSCode，保存你的SCSS文件，未加空格的calc()运算符就会自动被加上空格啦！

内容的提问来源于stack exchange，提问作者Lefthandmedia