Prettier与ESLint可在VSCode中协同工作，Prettier负责代码格式化，ESLint专注代码质量检查。通过安装eslint-config-prettier和eslint-plugin-prettier避免规则冲突，并在.eslintrc配置中引入plugin:prettier/recommended。同时在VSCode的settings.json中设置Prettier为默认格式化工具，开启保存时自动格式化和ESLint自动修复，实现编辑时实时提示、保存时统一格式，提升开发效率与团队协作一致性。

Prettier 和 ESLint 在 VSCode 中可以很好地协同工作，各自负责不同的职责：Prettier 负责代码格式化，ESLint 负责代码质量和潜在错误的检查。通过合理配置，两者不会冲突，反而能提升开发体验。

1. 明确分工：Prettier 格式化，ESLint 检查逻辑

为了协同工作，首先要让工具各司其职：

• Prettier：专注代码样式（如引号、分号、换行、缩进等）
• ESLint：专注代码质量（如未使用变量、潜在 bug、命名规范等）

避免 ESLint 重复管理格式问题，可通过插件禁用与 Prettier 冲突的规则。

2. 安装必要插件和依赖

在项目中安装以下 npm 包：

npm install –save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

其中：

• eslint-config-prettier：关闭所有与 Prettier 冲突的 ESLint 规则
• eslint-plugin-prettier：将 Prettier 作为 ESLint 规则运行，格式错误会显示在 ESLint 提示中

同时确保 VSCode 安装了以下扩展：

• ESLint（由 Microsoft 提供）
• Prettier – Code formatter

3. 配置 ESLint 使用 Prettier

在项目根目录的 .eslintrc.js 或 .eslintrc.json 中添加：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

27

查看详情

{ “extends”: [ “eslint:recommended”, “plugin:prettier/recommended” ], “rules”: { // 可自定义额外规则 } }

这样会自动启用 prettier/recommended，整合 Prettier 并应用 eslint-config-prettier 来消除冲突。

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

在 VSCode 的 settings.json 中设置：

{ “[javascript]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[typescript]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[json]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “editor.formatOnSave”: true, “editor.codeActionsOnSave”: { “source.fixAll.eslint”: true } }

说明：

• 保存文件时自动用 Prettier 格式化
• 同时触发 ESLint 自动修复可修复的问题（如缺少分号、空格等）

注意：开启 source.fixAll.eslint 后，ESLint 会调用 Prettier（如果已集成），实现统一处理。

基本上就这些。配置完成后，你在编辑代码时既能获得 ESLint 的质量提示，又能享受 Prettier 带来的统一格式，保存即自动整理，团队协作更顺畅。