Prettier与ESLint：在VSCode中实现代码格式化与校验

Prettier负责代码格式化，ESLint负责逻辑与质量检查；需关闭ESLint中格式规则、配置VSCode保存时自动格式化与修复，并通过项目配置文件统一团队规范。

在 VSCode 中同时用好 Prettier 和 ESLint，关键不是“谁替代谁”，而是“谁管格式、谁管逻辑”——Prettier 负责统一代码样式（缩进、引号、换行等），ESLint 负责检查代码质量与潜在问题（如未使用变量、错误的 Promise 用法等）。两者配合得当，编辑器保存时就能自动格式化 + 校验报错，开发体验更顺。

明确分工：Prettier 做格式，ESLint 做规则

Prettier 是“不接受商量”的格式化工具，它不支持配置“是否加分号”这类风格争议项（除非关掉整个规则）；ESLint 则是可高度定制的静态检查器，能覆盖语法、逻辑、安全等多维度。若让 ESLint 同时管格式，容易和 Prettier 冲突（比如一个要分号、一个不要），导致保存后反复格式化或报错不消失。

• 关闭 ESLint 中所有与格式相关的规则（如 semi、quotes、comma-dangle），推荐直接使用 eslint-config-prettier 来一键禁用冲突规则
• 保留 ESLint 的业务逻辑类规则（如 no-unused-vars、react-hooks/exhaustive-deps、no-async-promise-executor）
• Prettier 配置保持精简，通常只需指定 semi、singleQuote、tabWidth 等基础项，其余交给默认值

VSCode 设置：确保保存时自动执行

VSCode 默认不会在保存时同时触发 Prettier 格式化和 ESLint 修复，需手动配置对齐行为：

• 安装官方扩展：Prettier（by Esben Petersen）和 ESLint（by Dirk Baeumer）
• 在 VSCode 设置（settings.json）中启用保存时格式化，并指定默认格式化工具为 Prettier：
  "editor.formatOnSave": true
  "editor.defaultFormatter": "esbenp.prettier-vscode"
• 允许 ESLint 在保存时自动修复**可修复的问题**（如引号、空格等已被禁用的格式规则除外）：
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
• 如项目含多种语言（如 .vue 或 .ts），建议按语言单独设置格式化器，避免误处理

项目级配置：靠配置文件统一团队行为

仅靠 VSCode 设置无法保证所有开发者一致，必须把规则落到项目配置文件中：

Picit AI

免费AI图片编辑器、滤镜与设计工具

195

查看详情

• 根目录放 .prettierrc（或 prettier.config.js），定义 Prettier 行为
• 用 .eslintrc.cjs（或 .js/.json）配置 ESLint，继承 eslint:recommended + plugin:react/recommended（如需）+ prettier（即 eslint-config-prettier）
• 加 .eslintignore 排除 node_modules、dist 等无需检查的目录
• 可选：添加 package.json 中的脚本，如 "lint": "eslint src/" 和 "format": "prettier --write src/"，方便 CI 或手动执行

常见问题：为什么保存没反应？或提示“ESLint couldn’t determine the plugin”？

多数问题出在插件未正确加载或配置路径不对：

• 确认项目本地安装了 prettier、eslint、eslint-config-prettier（及所需插件如 @typescript-eslint/eslint-plugin），而非仅全局安装
• VSCode 工作区必须打开的是项目根目录（含 node_modules 和配置文件），否则扩展找不到本地依赖
• 检查 ESLint 输出面板（Ctrl+Shift+U → 选择 ESLint），看是否有加载失败或路径警告
• 如果用了 TypeScript，确保 @typescript-eslint/parser 和对应插件已配置，且 parserOptions.project 指向正确的 tsconfig.json

基本上就这些。配好一次，后续开发就几乎不用操心格式和低级错误，专注写逻辑本身。

以上就是Prettier与ESLint：在VSCode中实现代码格式化与校验的详细内容，更多请关注php中文网其它相关文章！