配置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 相关选项：

{ “semi”: false, “trailingComma”: “es5”, “tabWidth”: 2, “bracketSpacing”: true, “arrowParens”: “avoid”, “printWidth”: 80, “endOfLine”: “auto”, “htmlWhitespaceSensitivity”: “css” }

• 设置 htmlWhitespaceSensitivity: “css” 可避免 Prettier 错误地压缩 Flex 容器中的换行与空格

设置默认格式化工具为 Prettier

确保 VSCode 在格式化 CSS 时调用的是 Prettier 而非内置格式化器。

• 右键点击 CSS 文件，选择“格式化文档时使用…”
• 选择 Prettier 并勾选“设为默认”
• 可在 settings.json 中添加以下配置：

{ “[css]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[scss]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” } }

统一 Flex 属性书写顺序（可选）

虽然 Prettier 不强制属性排序，但你可以结合 stylelint 实现 Flex 属性的规范排列。

立即学习“前端免费学习笔记（深入）”；

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

• 安装 Stylelint 插件和依赖：

npm install stylelint stylelint-config-recommended –save-dev

• 创建 .stylelintrc.json 配置文件：

{ “extends”: “stylelint-config-recommended”, “rules”: { “order/properties-order”: [ “display”, “flex”, “flex-basis”, “flex-direction”, “flex-flow”, “flex-grow”, “flex-shrink”, “flex-wrap”, “justify-content”, “align-items”, “align-content”, “gap”, “order” ] } }

• 这样在配合格式化工具时，Flex 相关属性会按你定义的顺序排列，提升可读性

快捷键快速格式化

完成配置后，使用快捷键一键美化代码：

• windows/linux：Shift + Alt + F
• macOS：Shift + Option + F

也可以右键选择“格式化文档”，VSCode 会自动按规则整理 Flex 布局代码，保持缩进一致、换行清晰。

基本上就这些。合理配置 Prettier 和 Stylelint，就能让 VSCode 自动优雅地格式化 display: flex 及其相关属性，提高开发效率和代码一致性。