使用Prettier并配置htmlWhitespaceSensitivity为css可解决VSCode格式化calc、var、rgba等问题，确保函数内空格正确不换行。
VSCode 格式化包含 calc、var、rgba 等函数的 CSS 代码时，有时会出现格式错误或换行不合理的问题。这通常是因为默认的格式化工具（如内置的 CSS formatter 或 Prettier）配置不当所致。以下是解决方法。
使用 Prettier 正确格式化带函数的 CSS
Prettier 是目前最主流的代码格式化工具，对 calc、var 等函数支持良好，只需正确配置即可。
- 安装 Prettier 插件：在 VSCode 扩展市场搜索 Prettier - Code formatter 并安装。
- 确保项目根目录有 .prettierrc 配置文件，或在 settings.json 中设置相关选项。
- 关键配置项示例：
其中 htmlWhitespaceSensitivity: "css" 很重要，能避免在 calc 内部错误换行。
设置 VSCode 默认格式化工具为 Prettier
确保保存时调用的是 Prettier 而非默认格式化器。
立即学习“前端免费学习笔记（深入）”；
- 打开 VSCode 设置（Ctrl + ,）
- 搜索 Default Formatter
- 选择 esbenp.prettier-vscode
- 启用 Format On Save
也可以在项目中添加 .vscode/settings.json 文件：
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }避免 calc 函数被错误拆分
常见问题是 calc 被格式化成多行或空格被删除，导致语法错误。例如：
若被格式化为：
width: calc(100% -20px); /* 缺少空格，可能出错 */解决方案：
- 确保 Prettier 版本较新（>=2.0）
- 不要手动修改 calc 内部空格规则，Prettier 会自动处理
- 避免使用其他冲突的 CSS 格式化插件（如 Beautify）
验证格式化效果
写一段测试代码：
.example { width: calc(100% - var(--sidebar-width)); margin: calc(2rem + 10px); background: rgba(0, 0, 0, 0.5); }保存后观察是否保持原意且格式美观。如果正常，说明配置成功。
基本上就这些。只要用 Prettier 并正确设置 htmlWhitespaceSensitivity，VSCode 就能安全格式化含函数的 CSS 代码。不复杂但容易忽略细节。
