使用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 中每个百分比块的换行和缩进，避免压缩成一行。

立即学习“前端免费学习笔记（深入）”；

windows-shell-syntax

在 Windows 上执行终端命令，或对比 Windows 与 Linux 的 Shell 语法时使用。建议先检测当前 Shell 是 PowerShell 还是 cmd.exe，再给出相应命令……

下载

调整 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 动画保持整洁、分行良好的结构，提升维护效率。