<p>使用Prettier并正确配置可避免vscode格式化css时丢失注释。安装Prettier插件，创建.prettierrc文件并设置标准选项，确保使用/ /块级注释，避免//单行注释。在settings.json中将Prettier设为默认格式化工具，并启用保存时自动格式化。对于CSS-in-JS或预处理器如scss，需安装额外插件并仍使用/ /注释以确保保留。这样配置后，注释将被完整保留，代码保持整洁。</p>
VSCode 默认的格式化工具（如 Prettier 或内置的 CSS 格式化器）在处理带注释的 CSS 代码时，有时会错误地移动或删除注释，尤其是当注释位置特殊或格式不标准时。要正确格式化含注释的 CSS 并保留注释，关键在于配置合适的工具和规则。
使用 Prettier 并正确配置
Prettier 是目前最流行的代码格式化工具之一，对 CSS 注释支持良好，只要配置得当，不会丢失注释。
- 安装 Prettier 插件：在 VSCode 扩展中搜索 Prettier – Code formatter 并安装。
- 确保项目根目录有 .prettierrc 配置文件，内容如下：
{ "semi": false, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2, "useTabs": false, "bracketSpacing": true, "arrowParens": "avoid" }
这些设置不会影响注释，Prettier 默认会保留 CSS 中的标准 /* */ 注释。
立即学习“前端免费学习笔记（深入）”；
避免非标准注释写法
CSS 只支持 /* 注释内容 */ 这种块级注释。不要使用 // 单行注释，虽然某些预处理器（如 sass）支持，但在纯 CSS 中会被当作普通样式忽略或导致格式化异常。
正确示例：
/* 全局按钮样式 */ .btn { padding: 10px; /* 背景颜色 */ background-color: #007bff; }
这样写注释，VSCode + Prettier 格式化后仍能完整保留。
设置默认格式化工具为 Prettier
确保保存时调用的是 Prettier，而不是 VSCode 内置格式化器。
- 右键点击 CSS 文件，选择“格式化文档时使用…”
- 选择 Prettier 并设为默认
- 可在 settings.json 中添加：
"[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.formatOnSave": true
特殊情况：使用 CSS-in-JS 或预处理器
如果你在 javaScript 中写 CSS 字符串，或使用 SCSS、less，需额外安装对应插件（如 prettier-plugin-css），并确保语法被正确识别。
例如，在 SCSS 中注释可用 //，但导出为 CSS 时会被移除。若需保留，必须使用 /* */。
基本上就这些。只要用标准注释语法，搭配 Prettier 正确配置，VSCode 格式化 CSS 时不会丢失注释，还能保持代码整洁。