配置vscode代码格式化需结合Prettier与ESLint。1. 安装Prettier并创建.prettierrc定义规则；2. 安装Prettier扩展并设为默认格式化程序；3. 启用保存自动格式化；4. 安装ESLint相关依赖并配置协同规则；5. 共享配置文件至版本控制；6. 添加format脚本统一执行。

在 VSCode 中设置代码格式化规则与风格指南，能帮助团队保持代码一致性，提升可读性和协作效率。关键在于结合编辑器内置功能与外部工具（如 Prettier、ESLint 等）进行统一配置。以下是具体操作方法。

安装并配置格式化工具

VSCode 本身支持基础格式化，但推荐使用成熟工具实现更精细控制。以 javaScript/typescript 为例，Prettier 是广泛使用的格式化工具。

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

{ “semi”: true, “trailingComma”: “es5”, “singleQuote”: true, “printWidth”: 80 }

• 在 VSCode 扩展市场搜索并安装 Prettier – Code formatter

配置 VSCode 默认格式化程序

确保保存文件时自动使用 Prettier 格式化。

• 打开 VSCode 设置（Ctrl + ,）
• 搜索 default Formatter
• 选择 Prettier 作为默认格式化程序
• 启用 Format On Save，可在设置中勾选或添加以下配置到 .vscode/settings.json：

{ “editor.formatOnSave”: true, “editor.defaultFormatter”: “esbenp.prettier-vscode” }

集成 ESLint 提升代码质量

若项目使用 ESLint，可让其与 Prettier 协同工作，避免规则冲突。

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

• 安装依赖：npm install –save-dev eslint eslint-config-prettier eslint-plugin-prettier
• 在 .eslintrc.json 中加入：

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

• VSCode 安装 ESLint 插件
• 启用保存时自动修复：“eslint.autoFixOnSave”: true（注意新版推荐使用 lint task 而非此选项）

团队共享配置确保一致性

为避免每个成员手动设置，应将配置纳入版本控制。

• 提交 .prettierrc、.eslintrc、.vscode/settings.json 到仓库
• 在 package.json 添加格式化脚本：

“scripts”: { “format”: “prettier –write src/**/*.{js,ts,jsx,tsx}” }

• 团队成员运行 npm run format 可统一格式

基本上就这些。通过合理配置 VSCode 与主流工具联动，能实现开箱即用的代码风格管理，减少人为差异。关键是把规则固化在项目中，而非依赖个人编辑器习惯。