配置Prettier并调整printWidth可解决VSCode中CSS渐变格式化问题。首先安装Prettier扩展并设为默认格式化工具，在项目根目录创建.prettierrc文件，设置适当printWidth值（如120）以避免渐变代码被强制换行，同时在settings.json中禁用内置CSS格式化器，确保格式化行为一致，最终通过快捷键触发格式化使配置生效。
VSCode 默认的格式化工具（如内置的 CSS 格式化器或使用 Prettier）有时会对 linear-gradient、radial-gradient 等渐变背景代码进行不合理的换行或缩进，影响可读性。要正确格式化 CSS 渐变背景代码，关键在于配置合适的格式化工具和规则。
使用 Prettier 统一格式化 CSS 渐变
推荐使用 Prettier 作为 VSCode 中的默认格式化工具，它对现代 CSS 支持更好，包括渐变语法。
- 在 VSCode 扩展市场中安装 Prettier - Code formatter
- 设置 Prettier 为默认格式化工具：右键编辑器 -> “格式化文档时使用” -> 选择 Prettier
- 在项目根目录添加 .prettierrc 配置文件，控制格式化行为
调整 Prettier 配置避免过度换行
默认情况下，Prettier 可能会把很长的 linear-gradient 拆成多行。你可以通过配置 printWidth 来控制换行时机。
示例 .prettierrc 配置：{
"semi": true,
"singleQuote": false,
"printWidth": 120,
"tabWidth": 2,
"trailingComma": "es5"
}
增大 printWidth 值（如 120 或 150），可以让较短的渐变代码保持在一行，避免不必要的换行。
立即学习“前端免费学习笔记（深入）”；
手动触发格式化快捷键
确保格式化生效，使用以下快捷键手动格式化当前文件：
- Windows/Linux: Shift + Alt + F
- macOS: Shift + Option + F
如果未生效，请右键编辑器选择“格式化文档”，并确认已选中 Prettier。
禁用默认格式化器，避免冲突
VSCode 内置的 CSS 格式化器可能与 Prettier 冲突，建议关闭：
在 settings.json 中添加："css.format.enable": false, "scss.format.enable": false
这样可确保只有 Prettier 处理样式文件格式化，行为更一致。
基本上就这些。合理配置 Prettier 后，linear-gradient 和其他渐变背景代码就能保持清晰、统一的格式，不会被拆得支离破碎。关键是控制 printWidth 并统一使用一个格式化工具。
