使用Prettier替代VSCode内置格式化器可解决@keyframes结构混乱问题：安装Prettier扩展并设为默认格式化器，通过配置.prettierrc文件优化输出格式，同时调整VSCode的css.format设置增强可读性，最终实现keyframes分行清晰、结构整洁的样式排版。
VSCode 默认的格式化工具（如内置的 CSS 格式化器或 Prettier）在处理 @keyframes 动画时，有时会把关键帧合并成一行或打乱结构，影响可读性。要正确格式化 keyframe 动画，需调整设置或使用合适的扩展。
启用正确的格式化器
推荐使用 Prettier 替代 VSCode 内置格式化器，它对 CSS 动画支持更友好：
- 安装 Prettier 扩展：在扩展商店搜索 “Prettier - Code formatter” 并安装
- 设置 Prettier 为默认格式化器： "editor.defaultFormatter": "esbenp.prettier-vscode"
- 右键点击 CSS 文件选择 “Format Document With…” 并设为 Prettier
配置 Prettier 保持 keyframes 结构清晰
通过配置 .prettierrc 或 .prettierrc.json 文件优化格式化效果：
{ "printWidth": 100, "tabWidth": 2, "semi": true, "singleQuote": false, "bracketSpacing": true, "arrowParens": "avoid", "proseWrap": "preserve" }Prettier 通常能保留 keyframes 中每个百分比块的换行和缩进，避免压缩成一行。
立即学习“前端免费学习笔记（深入）”；
调整 VSCode CSS 设置增强可读性
在 settings.json 中添加以下配置提升原生支持：
"css.format.enable": true, "css.format.newlineBetweenRules": true, "css.format.spaceAroundSelectorSeparator": false
这些设置有助于规则间留空行，使 @keyframes 块更易区分。
手动触发格式化的快捷方式
确保光标在 keyframes 区域内，使用快捷键：
- Windows/Linux: Shift + Alt + F
- macOS: Shift + Option + F
若未生效，右键选择 “Format Selection” 或 “Format Document” 明确调用格式化器。
基本上就这些。合理搭配 Prettier 与 VSCode 设置，就能让 @keyframes 动画保持整洁、分行良好的结构，提升维护效率。
