配置Prettier并关闭VSCode默认格式化，可高效规范响应式CSS的@media代码，提升可读性与维护性。
VSCode 中格式化响应式 CSS 的 @media 代码，关键在于配置合适的格式化工具和规则。默认情况下，VSCode 使用的是内置的 CSS 格式化引擎，但对复杂媒体查询的支持有限。要获得更好的格式化效果，推荐结合使用 Prettier 或 Stylelint 进行精细化控制。
启用 Prettier 并配置 CSS 格式化
Prettier 是目前最流行的代码格式化工具之一，对响应式 CSS 支持良好。
• 安装 Prettier 插件：在 VSCode 扩展市场搜索 “Prettier - Code formatter” 并安装。• 设置为默认格式化工具：右键编辑器 -> “格式化文档时使用” -> 选择 Prettier。
• 创建 .prettierrc 文件（项目根目录），加入以下配置：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": false,
"printWidth": 80,
"tabWidth": 2,
"bracketSpacing": true,
"arrowParens": "avoid"
}
Prettier 会自动格式化 @media 查询块，保持缩进一致、换行清晰，提升可读性。
确保 .vscode/settings.json 正确配置
在项目中创建 .vscode/settings.json 文件，明确指定 CSS 相关格式化行为：
立即学习“前端免费学习笔记（深入）”；
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"css.format.enable": false,
"scss.format.enable": false
}
• 关闭 VSCode 默认的 CSS 格式化，避免与 Prettier 冲突。• 启用保存时自动格式化，提升开发效率。
编写清晰的 @media 代码结构
即使有格式化工具，良好的编码习惯也很重要。建议按移动优先原则组织媒体查询：
/* 基础样式 (移动端) */
.container {
width: 100%;
}
<p>/<em> 平板设备 </em>/
@media (min-width: 768px) {
.container {
width: 750px;
}
}</p><p>/<em> 桌面端 </em>/
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
Prettier 会保留这种结构，并统一缩进与空行，让响应式逻辑更易维护。
处理 SCSS 或 Sass 中的嵌套媒体查询
如果使用 SCSS，嵌套的 @media 更常见。Prettier 能正确处理嵌套层级：
.card {
width: 100%;
<p>@media (min-width: 768px) {
width: 50%;
}
}
• 确保文件后缀为 .scss，Prettier 会自动识别语法。• 避免过深嵌套（超过 3 层），以免影响性能和可读性。
基本上就这些。合理配置 Prettier + 关闭默认格式化 + 规范书写结构，就能让 VSCode 高效格式化响应式 CSS 代码。不复杂但容易忽略细节。
