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 设置无法保证所有开发者一致，必须把规则落到项目配置文件中：

根目录放 .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

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

# vscode # vue # react # js # json # node # typescript # 工具 # 配置文件 # 常见问题 # format # 继承

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】