配置Prettier和Stylelint可实现VSCode中CSS Flex布局的自动格式化。首先安装Prettier并设置htmlWhitespaceSensitivity为"css"以保留合理空格，接着在settings.json中将Prettier设为CSS默认格式化工具，然后通过.stylelintrc.json配置Stylelint规则定义Flex属性顺序，如display、flex-direction、justify-content等，最后使用Shift+Alt+F快捷键一键格式化，确保代码整洁一致。
VSCode 中格式化 CSS 的 Flex 布局代码，关键在于配置好编辑器的格式化工具，让 display: flex 及其相关属性（如 flex-direction、justify-content、align-items 等）在保存或手动格式化时自动对齐、排序和美化。以下是一些实用技巧与方法。
启用并配置 Prettier 格式化工具
Prettier 是 VSCode 中最常用的代码格式化插件，支持 CSS、SCSS、Less 等样式语言，能智能处理 Flex 属性的排布。
- 在扩展市场中搜索并安装 Prettier - Code formatter
- 安装完成后，在项目根目录创建 .prettierrc 文件，配置 CSS 相关选项：
- 设置 htmlWhitespaceSensitivity: "css" 可避免 Prettier 错误地压缩 Flex 容器中的换行与空格
设置默认格式化工具为 Prettier
确保 VSCode 在格式化 CSS 时调用的是 Prettier 而非内置格式化器。
- 右键点击 CSS 文件，选择“格式化文档时使用...”
- 选择 Prettier 并勾选“设为默认”
- 可在 settings.json 中添加以下配置：
统一 Flex 属性书写顺序（可选）
虽然 Prettier 不强制属性排序，但你可以结合 stylelint 实现 Flex 属性的规范排列。
立即学习“前端免费学习笔记（深入）”；
- 安装 Stylelint 插件和依赖：
- 创建 .stylelintrc.json 配置文件：
- 这样在配合格式化工具时，Flex 相关属性会按你定义的顺序排列，提升可读性
快捷键快速格式化
完成配置后，使用快捷键一键美化代码：
- Windows/Linux：Shift + Alt + F
- macOS：Shift + Option + F
也可以右键选择“格式化文档”，VSCode 会自动按规则整理 Flex 布局代码，保持缩进一致、换行清晰。
基本上就这些。合理配置 Prettier 和 Stylelint，就能让 VSCode 自动优雅地格式化 display: flex 及其相关属性，提高开发效率和代码一致性。
