使用Prettier或VSCode内置格式化器可正确处理CSS变量，确保配置一致、禁用冲突插件，规范书写--variable并调用var()，避免格式化异常。
VSCode 默认的格式化工具（如 Prettier 或内置的 CSS 格式化器）在处理包含自定义 CSS 变量（--variable-name）的代码时，通常不会出问题。但如果你发现格式化后变量被错误处理、缩进异常或值被修改，可能是配置不当或使用了不兼容的插件。以下是正确格式化带有 CSS 变量的代码技巧。
确保使用支持 CSS 变量的格式化工具
CSS 自定义变量（例如 --primary-color: #007acc;）是标准 CSS 语法，主流格式化工具都应支持。推荐使用：
- Prettier：广泛支持 CSS、SCSS、Less，对变量处理稳定
- VSCode 内置 CSS 格式化器：基础支持良好，适合简单项目
安装 Prettier 插件后，在项目根目录添加 .prettierrc 配置文件，确保不启用可能干扰 CSS 的选项。
检查并配置 VSCode 的 CSS 格式化设置
打开 VSCode 设置（Ctrl + ,），搜索 “css format”，确认以下选项：
立即学习“前端免费学习笔记（深入）”；
- “editor.formatOnSave”：启用后保存自动格式化
- “css.validate”：设为 true，避免语法误报
- 若使用 Prettier，设置 “css” 文件默认格式化工具为 Prettier
在 settings.json 中添加：
{
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
}
正确书写 CSS 变量避免格式化问题
确保变量写法符合规范，防止格式化器误解：
- 变量名以 -- 开头，如 --text-size: 16px;
- 使用 var(--variable) 调用，支持回退值：var(--color, #333)
- 避免在变量值中使用未转义的特殊字符或嵌套表达式
示例：
:root {
--primary-color: #007acc;
--border-radius: 4px;
}
.button {
background-color: var(--primary-color);
border-radius: var(--border-radius);
}
排除格式化插件冲突
如果格式化后变量被删除或重排，检查是否安装了过时或非标准的 CSS 插件。禁用其他 CSS 格式化扩展，只保留 Prettier 或 VSCode 默认工具。
在 settings.json 中可明确关闭某些验证：
"css.lint.unknownProperties": "ignore"
这能防止工具将自定义变量误判为错误属性。
基本上就这些。只要工具选对、配置清晰，VSCode 处理带变量的 CSS 完全没问题。关键是统一格式化器，避免多工具冲突。
