使用Prettier统一css格式规则，通过项目级配置文件确保团队成员代码风格一致；2. 配置vscode使用本地Prettier并开启保存自动格式化；3. 可选集成Stylelint进行语法检查；4. 通过git Hooks在提交前自动格式化，保证代码统一性。

要让团队所有成员在 VSCode 中实现 CSS 代码格式化风格统一，关键在于使用统一的编辑器配置和代码格式化工具。通过项目级配置文件约束格式规则，避免因个人设置不同导致代码风格差异。

1. 使用 Prettier 统一格式化规则

Prettier 是目前最主流的代码格式化工具，支持 CSS、scss、less 等样式语言。团队应统一使用 Prettier 并共享配置。

• 在项目根目录安装 Prettier：
  npm install –save-dev prettier
• 创建 .prettierrc 文件定义 CSS 格式规则，例如：

{
  “semi”: false,
  “singleQuote”: true,
  “printWidth”: 80,
  “tabWidth”: 2,
  “trailingComma”: “es5”,
  “useTabs”: false,
  “bracketSpacing”: true,
  “arrowParens”: “avoid”
}

• 创建 .prettierignore 忽略不需要格式化的文件（如 node_modules）

2. 配置 VSCode 使用项目级 Prettier

确保每个团队成员都使用项目本地的 Prettier 而非全局版本，避免版本不一致。

• 安装 VSCode 插件：Prettier – Code formatter
• 在项目根目录创建 .vscode/settings.json，内容如下：

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

• 这样每次保存 CSS 文件时会自动使用项目配置的 Prettier 格式化

3. 结合 ESLint（可选，用于语法检查）

如果项目使用 CSS in js 或需要更严格的代码质量控制，可集成 Stylelint。

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

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

• 安装 stylelint 和 VSCode 插件 stylelint.vscode-stylelint
• 配置 .stylelintrc 定义 CSS 语法规则
• 注意：若同时使用 Prettier 和 Stylelint，建议用 stylelint-config-prettier 关闭与 Prettier 冲突的规则

4. 提交前自动格式化（推荐）

防止有人未开启格式化就提交代码，可通过 Git Hooks 在提交前自动格式化。

• 安装 husky 和 lint-staged：

npx husky-init && npm installnpx lint-staged init

• 配置 package.json 中的 lint-staged：

“lint-staged”: {
  “*.css”: [
    “prettier –write”
  ],
  “*.scss”: [
    “prettier –write”
  ]
}

基本上就这些。只要团队成员克隆项目后使用本地 Prettier 配置，并开启保存自动格式化，CSS 代码风格就能保持高度统一。关键是把配置文件纳入版本管理，确保所有人“开箱即用”。