通过配置Prettier、ESLint和EditorConfig并纳入版本控制，团队可实现代码风格统一。1. 安装Prettier扩展并创建.prettierrc定义格式规则；2. 集成ESLint检查代码质量，安装相关依赖并配置.eslintrc.json启用Prettier插件；3. 在VSCode中设置默认格式化工具为Prettier，开启保存自动格式化，并通过.vscode/settings.json共享配置；4. 创建.editorconfig文件统一缩进、换行等基础编辑行为。三者结合确保团队成员无需手动调整即可保持代码风格一致，提升协作效率。
在团队协作开发中，代码风格的统一是提升可读性和维护效率的关键。VSCode 作为主流编辑器，结合 Prettier、ESLint 等工具，能有效实现团队代码格式化规范的落地。下面介绍如何配置 VSCode，让团队成员写出风格一致的代码。
1. 安装并配置 Prettier
Prettier 是一个强大的代码格式化工具，支持多种语言，能自动处理代码缩进、引号、括号等样式问题。
- 在 VSCode 扩展市场搜索 Prettier - Code formatter 并安装
- 项目根目录创建
.prettierrc文件定义格式规则，例如：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
团队成员使用相同配置，确保格式输出一致。
2. 集成 ESLint（JavaScript/TypeScript 项目）
ESLint 能检查代码质量和潜在错误，与 Prettier 配合使用，既能规范格式又能保证代码健康。
- 安装 ESLint 扩展和项目依赖：
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev - 创建
.eslintrc.json文件启用 Prettier 插件：
{
"extends": ["eslint:recommended", "plugin:prettier/recommended"]
}
这样 ESLint 会把格式问题也纳入检查，避免提交不规范代码。
3. 配置 VSCode 默认格式化工具
设置默认格式化程序为 Prettier，避免手动选择。
citySHOP是一款集CMS、网店、商品、系统，管理更加科学快速；全新Jquery前端引擎；智能缓存、图表化的数据分析，手机短信营销；各种礼包设置、搭配购买、关联等进一步加强用户体验；任何功能及设置都高度自定义；MVC架构模式，代码严禁、规范；商品推荐、促销、礼包、折扣、换购等多种设置模式；商品五级分类，可自由设置分类属性；商品展示页简介大方，清晰，图片自动放大，无需重开页面；商品评价、咨询分开
- 打开 VSCode 设置（Ctrl + ,）
- 搜索 Default Formatter
- 选择 esbenp.prettier-vscode
- 启用“Format On Save”选项，保存时自动格式化
也可在项目中添加 .vscode/settings.json 提交到仓库，统一团队设置：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
4. 使用 EditorConfig 统一基础编辑行为
EditorConfig 可以跨编辑器统一换行符、缩进风格等基础设置。
- 在项目根目录创建
.editorconfig文件：
root = true[*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true
[*.md] trim_trailing_whitespace = false
- VSCode 默认支持，无需额外插件
团队成员无论使用什么编辑器，都能保持基本编辑行为一致。
基本上就这些。通过 Prettier + ESLint + EditorConfig 三者配合，并将配置纳入版本控制，团队成员只需克隆项目即可获得统一的代码格式环境，减少“谁的代码更漂亮”的争论，专注在真正重要的逻辑实现上。不复杂但容易忽略。
