VSCode与Prettier协同工作的关键是将Prettier设为默认格式化工具。2. 安装Prettier插件后，通过设置”defaultFormatter”指定使用Prettier。3. 启用”formatOnSave”实现保存时自动格式化。4. 若项目使用ESLint，需配置eslint-config-prettier避免规则冲突，确保代码风格统一。

VSCode 的代码格式化功能与 Prettier 可以很好地协同工作，关键在于正确配置优先级和规则来源。默认情况下，VSCode 使用内置的格式化器，但引入 Prettier 后，建议让 Prettier 成为主要的格式化工具，确保团队统一风格。

安装与启用 Prettier

在 VSCode 中使用 Prettier，首先要安装插件：

• 打开扩展面板（Ctrl+Shift+X）
• 搜索 “Prettier – Code formatter” 并安装官方插件
• 安装完成后，Prettier 会自动识别项目中的配置文件（如 .prettierrc）

设置 Prettier 为默认格式化工具

为了让 VSCode 在格式化时调用 Prettier，需指定其为默认处理器：

• 右键编辑器内容，选择“格式化文档时使用…”
• 选择 “Prettier – Code formatter”
• 也可在 settings.json 中明确设置：

“editor.defaultFormatter”: “esbenp.prettier-vscode”

配合保存时自动格式化

提升开发效率的一个常用做法是保存文件时自动格式化：

代码小浣熊

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

51

查看详情

• 在设置中开启 “Format On Save”
• 或添加配置项：

“editor.formatOnSave”: true

这样每次保存代码，Prettier 都会按规则自动调整格式。

与 ESLint 协同（如项目使用）

若项目同时使用 ESLint 和 Prettier，推荐安装 eslint-config-prettier 来关闭 ESLint 中与格式相关的规则，避免冲突。VSCode 中可配置 ESLint 插件自动修复问题，再由 Prettier 处理样式细节。

基本上就这些。只要设置好默认格式化器并启用保存格式化，VSCode 和 Prettier 就能无缝配合，保持代码整洁一致。