答案：通过配置Prettier与Stylelint并设置保存时自动格式化，可优化VSCode中@media查询的括号位置、换行及缩进问题，提升CSS代码规范性与可维护性。
VSCode 默认的格式化工具（如内置的 HTML/CSS 格式化器或 Prettier）有时对 @media 查询 的处理不够理想，比如括号位置、换行方式、嵌套样式缩进等问题。要正确格式化 CSS 中的媒体查询，需要结合编辑器设置和扩展插件进行优化。
启用并配置默认格式化工具
VSCode 内置了对 CSS 的基本格式化支持，确保已开启并正确设置：
- 打开设置（Ctrl + , 或菜单 File > Preferences > Settings）
- 搜索 “format on save”，勾选以启用保存时自动格式化
- 搜索 “default formatter”，为 CSS 设置默认格式化器，例如 vscode.css-language-features
注意：默认格式化器可能不会深度优化 @media 的嵌套结构，适合简单项目。
使用 Prettier 提升格式化质量
Prettier 是更强大的代码格式化工具，对 @media 查询有更好的支持：
立即学习“前端免费学习笔记（深入）”；
- 在扩展市场安装 Prettier - Code formatter
- 在项目根目录添加 .prettierrc 配置文件，例如：
- 设置 Prettier 为默认格式化器：右键编辑器 -> “Format Document With” -> 选择 Prettier
- Prettier 会自动规范
@media括号前后空格、换行与嵌套块的缩进
配合 Stylelint 实现更精细控制
若需精确控制 @media 语法风格（如强制换行、空行等），推荐使用 Stylelint：
- 安装扩展：stylelint.vscode-stylelint
- 创建 .stylelintrc.json 文件，加入规则：
- 启用自动修复：在 VSCode 设置中开启 “Stylelint: Auto Fix On Save”
- 可自定义
@media前是否换行、嵌套缩进等细节
常见格式化问题与技巧
- 媒体查询挤在一行？ 使用 Prettier 的 printWidth 控制最大行宽，超长自动折行
- 嵌套样式没缩进？ 确保使用支持 CSS 嵌套的格式化器（Prettier 2.2+ 支持 SCSS/Sass/Less）
-
想保留空行分隔？ 在 Stylelint 中配置
rule-empty-line-before规则 - 混合使用 CSS 和 SCSS？ 将文件关联为 SCSS 语言模式，获得更好嵌套支持
基本上就这些。合理搭配 Prettier 与 Stylelint，能让你的 @media 查询清晰、统一、易维护。
