使用Prettier并正确配置，禁用VSCode内置CSS格式化器，规范注释写法，配合stylelint规则，可有效防止格式化破坏CSS注释。
VSCode 在格式化 CSS 代码时默认使用内置的格式化工具或第三方美化器（如 Prettier），有时会错误地处理注释，导致换行、缩进异常甚至删除空注释。要避免格式化破坏 CSS 注释，可以通过配置编辑器和格式化工具来保护注释内容。
1. 使用 Prettier 并正确配置
如果你使用 Prettier 作为格式化工具，它对 CSS 注释的支持较好，但需注意版本和配置：
- 确保安装了最新版 Prettier 插件
- 在项目根目录添加 .prettierrc 配置文件
- 设置 `printWidth` 和 `tabWidth` 避免因换行破坏注释结构
示例配置：
{
"printWidth": 100,
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "avoid"
}
Prettier 一般不会删除合法的 /* */ 注释，但避免使用空注释或非常规写法（如 /\*!*\//）。
2. 禁用 VSCode 内置格式化器对 CSS 的处理
VSCode 自带的 CSS 格式化器可能不如 Prettier 稳定，建议指定使用 Prettier 而非默认工具：
- 打开设置（Settings）
- 搜索 "css format enable"
- 取消勾选或设为 false，禁用内置格式化
或者在 settings.json 中添加：
"css.format.enable": false
这样可防止两个格式化器冲突导致注释被误改。
3. 正确书写 CSS 注释以避免被误判
某些注释写法容易被解析器误解为语法错误或无效内容：
- 使用标准的
/* 注释内容 */格式 - 避免在注释中嵌入非法字符或未闭合的符号
- 不要写连续多个
/**/空注释 - 若需保留特殊注释（如构建指令），使用
/*!（常用于版权信息）
例如：
/* 推荐：正常注释 */ /* 可保留：重要声明不被压缩 */ /*! 版权信息，通常会被保留 */
4. 配合 stylelint 提供更精细控制
使用 stylelint 可以定义注释规则并配合格式化工具：
部分相关规则：
{
"rules": {
"comment-empty-line-before": null,
"comment-whitespace-inside": "inner"
}
}
通过 stylelint 校验而非直接格式化，能更好保留注释原始结构。
基本上就这些。关键在于统一格式化工具、关闭冲突的默认格式化器，并规范注释写法。合理配置后，VSCode 不会再破坏你的 CSS 注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
