通过配置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 会把格式问题也纳入检查，避免提交不规范代码。

代码小浣熊

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

51

查看详情

3. 配置 VSCode 默认格式化工具

设置默认格式化程序为 Prettier，避免手动选择。

• 打开 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 <p>[*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true</p><p>[*.md] trim_trailing_whitespace = false 

• VSCode 默认支持，无需额外插件

团队成员无论使用什么编辑器，都能保持基本编辑行为一致。

基本上就这些。通过 Prettier + ESLint + EditorConfig 三者配合，并将配置纳入版本控制，团队成员只需克隆项目即可获得统一的代码格式环境，减少“谁的代码更漂亮”的争论，专注在真正重要的逻辑实现上。不复杂但容易忽略。