配置Prettier并关闭VSCode默认格式化，可高效规范响应式CSS的@media代码，提升可读性与维护性。

VSCode 中格式化响应式 CSS 的 @media 代码，关键在于配置合适的格式化工具和规则。默认情况下，VSCode 使用的是内置的 CSS 格式化引擎，但对复杂媒体查询的支持有限。要获得更好的格式化效果，推荐结合使用 Prettier 或 Stylelint 进行精细化控制。

启用 Prettier 并配置 CSS 格式化

Prettier 是目前最流行的代码格式化工具之一，对响应式 CSS 支持良好。

{
  "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
}

编写清晰的 @media 代码结构

即使有格式化工具，良好的编码习惯也很重要。建议按移动优先原则组织媒体查询：

/* 基础样式 (移动端) */
.container {
  width: 100%;
}
/ 平板设备 /
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/ 桌面端 /
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}

Prettier 会保留这种结构，并统一缩进与空行，让响应式逻辑更易维护。

处理 SCSS 或 Sass 中的嵌套媒体查询

如果使用 SCSS，嵌套的 @media 更常见。Prettier 能正确处理嵌套层级：

.card {
  width: 100%;
@media (min-width: 768px) {
width: 50%;
}
}

基本上就这些。合理配置 Prettier + 关闭默认格式化 + 规范书写结构，就能让 VSCode 高效格式化响应式 CSS 代码。不复杂但容易忽略细节。