使用Prettier和Stylelint结合VSCode实现团队CSS格式化规范：1. 通过.prettierrc配置基础格式；2. 用.stylelintrc.json定义细粒度规则如属性顺序；3. 在VSCode中设置默认格式化器为Prettier并启用保存自动格式化；4. 提交配置文件至仓库并配合husky确保一致性。
VSCode 中默认的 CSS 格式化器（如内置的或通过 Prettier、Stylelint 等插件）支持一定程度的自定义，但原生不支持完全自由的格式化规则。要根据团队规范自定义 CSS 格式化规则，需要结合配置文件和第三方工具来实现。
1. 使用 Prettier 统一代码风格
Prettier 是目前最常用的代码格式化工具之一，支持 CSS、SCSS、Less 等样式语言，并可通过配置文件统一团队规范。
操作步骤：
- 安装 Prettier 插件：在 VSCode 扩展中搜索 Prettier - Code formatter 并安装。
- 在项目根目录创建 .prettierrc 文件，定义 CSS 相关格式化规则：
"semi": false,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true,
"arrowParens": "avoid",
"endOfLine": "lf",
"cssEnableSemicolons": false
}
- 其中与 CSS 相关的关键项：
– printWidth：每行最大字符数
– bracketSpacing：是否在块前加空格{ color: red }
– 可通过 overrides 针对 .css 文件单独设置
2. 配合 Stylelint 实现更细粒度控制
Prettier 能处理基础格式，但无法校验如属性顺序、单位使用等团队规范。此时应引入 Stylelint。
立即学习“前端免费学习笔记（深入）”；
{"extends": "stylelint-config-standard",
"rules": {
"indentation": 2,
"number-leading-zero": "always",
"string-quotes": "single",
"declaration-colon-space-after": "always",
"block-opening-brace-space-before": "always",
"property-case": "lower",
"order/properties-order": [
"position", "top", "right", "z-index", "display", "float",
"width", "height", "padding", "margin"
]
}
}
- 安装 VSCode 插件 Stylelint，保存时自动提示并可配合 Fix on Save 自动修复部分问题。
3. 设置 VSCode 默认格式化工具
确保保存时调用正确的格式化器。
- 打开 VSCode 设置（Ctrl + ,），搜索 Default Formatter。
- 为 CSS 设置默认格式化工具，例如：
css › Format: Enable 保持启用
Editor: Default Formatter 设置为 esbenp.prettier-vscode - 在项目中添加 .vscode/settings.json 以锁定团队配置：
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
4. 团队协作建议
- 将 .prettierrc、.stylelintrc.json、.vscode/settings.json 提交到仓库，确保所有人使用相同规则。
- 配合 husky + lint-staged 在提交时自动格式化 CSS 文件。
- 提供文档说明团队 CSS 编码规范，避免争议。
基本上就这些。通过 Prettier 控制格式输出，Stylelint 保证细节合规，再配合 VSCode 配置，就能实现符合团队要求的 CSS 格式化流程。不复杂但容易忽略的是配置文件的协同和统一启用。
