VSCode代码格式化：统一团队规范

技术教程
2025-10-21 13:29:01

通过配置Prettier、ESLint和EditorConfig并纳入版本控制，团队可实现代码风格统一。1. 安装Prettier扩展并创建.prettierrc定义格式规则；2. 集成ESLint检查代码质量，安装相关依赖并配置.eslintrc.json启用Prettier插件；3. 在VSCode中设置默认格式化工具为Prettier，开启保存自动格式化，并通过.vscode/settings.json共享配置；4. 创建.editorconfig文件统一缩进、换行等基础编辑行为。三者结合确保团队成员无需手动调整即可保持代码风格一致，提升协作效率。

vscode代码格式化：统一团队规范

在团队协作开发中，代码风格的统一是提升可读性和维护效率的关键。VSCode 作为主流编辑器，结合 Prettier、ESLint 等工具，能有效实现团队代码格式化规范的落地。下面介绍如何配置 VSCode，让团队成员写出风格一致的代码。

1. 安装并配置 Prettier

Prettier 是一个强大的代码格式化工具，支持多种语言，能自动处理代码缩进、引号、括号等样式问题。

在 VSCode 扩展市场搜索 Prettier - Code formatter 并安装
项目根目录创建 .prettierrc 文件定义格式规则，例如：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

团队成员使用相同配置，确保格式输出一致。

**2. 集成 ESLint（J*aScript/TypeScript 项目）**

ESLint 能检查代码质量和潜在错误，与 Prettier 配合使用，既能规范格式又能保证代码健康。

安装 ESLint 扩展和项目依赖：npm install eslint eslint-config-prettier eslint-plugin-prettier --s*e-dev
创建 .eslintrc.json 文件启用 Prettier 插件：

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

这样 ESLint 会把格式问题也纳入检查，避免提交不规范代码。

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

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

citySHOP 多用户商城

citySHOP是一款集CMS、网店、商品、系统，管理更加科学快速；全新Jquery前端引擎；智能缓存、图表化的数据分析，手机短信营销；各种礼包设置、搭配购买、关联等进一步加强用户体验；任何功能及设置都高度自定义；MVC架构模式，代码严禁、规范；商品推荐、促销、礼包、折扣、换购等多种设置模式；商品五级分类，可自由设置分类属性；商品展示页简介大方，清晰，图片自动放大，无需重开页面；商品评价、咨询分开

15 查看详情 citySHOP 多用户商城

打开 VSCode 设置（Ctrl + ,）
搜索 Default Formatter
选择 esbenp.prettier-vscode
启用“Format On S*e”选项，保存时自动格式化

也可在项目中添加 .vscode/settings.json 提交到仓库，统一团队设置：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnS*e": true,
  "editor.codeActionsOnS*e": {
    "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