VS Code Sass格式化工具修改逗号分隔变量值格式问题求助

嘿，作为VSCode新手遇到这种格式化的小细节问题确实挺烦的，毕竟咱们写的代码格式被自动改掉总有点别扭。不用彻底禁用格式化工具，根据你用的不同格式化工具，调整对应的设置就行，我给你分几种常见情况说明：

情况1：使用Prettier作为格式化工具 #

如果你的项目里用的是Prettier（现在前端项目里很常用），可以这么改：

• 打开VSCode设置（快捷键Ctrl+/Cmd+逗号），搜索prettier.cssSpaceAroundCommaInColor，把这个选项的勾选去掉（也就是设置为false）。
• 或者在项目根目录的.prettierrc配置文件里添加以下内容：

  {
    "cssSpaceAroundCommaInColor": false
  }
  

这样Prettier就不会给rgb这类颜色值的逗号后面自动加空格了。

情况2：使用VSCode自带的CSS/SCSS格式化工具 #

要是你没装第三方格式化插件，用的是VSCode默认的CSS语言服务工具：

• 打开设置，搜索css.format.commaSpace，把这个选项设置为false。
• 对应的settings.json配置代码是：

  "css.format.commaSpace": false
  

这个设置会同时作用于CSS和SCSS文件，完美适配你的需求。

情况3：使用Stylelint做代码检查与格式化 #

如果你的项目用Stylelint来规范代码格式，需要调整它的规则：

• 找到项目里的.stylelintrc（或.stylelintrc.json）配置文件，修改value-list-comma-space-after规则为never：

  {
    "rules": {
      "value-list-comma-space-after": "never"
    }
  }
  

保存配置后，Stylelint在格式化时就不会给逗号后加空格了。

小提示 #

如果你不确定自己当前用的是哪个格式化工具，可以打开一个SCSS文件，看VSCode右下角的状态栏，那里会显示当前激活的格式化工具（比如Prettier或者vscode.css-language-features），点击它还能切换工具或者快速打开对应的设置页面。

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