VS Code格式化SCSS文件时自动插入大量多余空格该如何解决？

问题原因 #

该异常是VS Code的SCSS文件格式化配置错误导致的，常见触发原因有三类：

• 错将非CSS/SCSS专用的格式化程序绑定到了.scss/.sass文件，比如把纯文本、HTML格式化器设置为SCSS的默认格式化工具，格式化程序无法识别SCSS语法规则，错误拆分标识符插入空格
• 已安装的SCSS格式化插件版本过旧存在bug，或者手动配置了错误的格式化规则，强制在语法标识符之间插入空格
• 同时安装了多个代码格式化插件，不同插件的格式化规则冲突，导致代码被反复修改出现异常空格

解决步骤 #

1. 校验文件类型关联：按下Ctrl+,（Mac设备按Command+,）打开VS Code设置页，搜索files.associations，确认.scss/.sass后缀的文件关联语言为scss，没有被错误设置为其他文件类型
2. 配置SCSS专用格式化程序：任意打开一个SCSS文件，右键点击编辑区空白位置，选择「使用...格式化文档」，再点击「配置默认格式化程序」，选择SCSS专用的格式化工具，新手推荐优先用VS Code内置的CSS语言功能自带的格式化程序；如果已经安装Prettier，选择Prettier - Code formatter即可，需确保Prettier配置中没有错误的SCSS规则
3. 排查插件冲突：如果上述操作后问题仍存在，暂时禁用所有非必要的格式化、代码风格检查类插件，每次禁用后重启VS Code测试格式化效果，找到冲突的插件后调整其作用范围，排除对SCSS文件的处理权限
4. 校验自定义规则：如果项目中存在.stylelintrc、.prettierrc这类格式化配置文件，检查是否配置了错误的空格规则，比如强制在属性名、单位、百分号前后插入空格的异常规则，删除对应配置即可恢复正常

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