1. 为什么只装 Prettier 不够VS Code 里 ESLint 与 Prettier 的职责边界刚搭前端工程化规范的同学最容易踩的一个坑就是VS Code 里只装了 Prettier 插件然后发现代码保存后确实变整齐了但no-unused-vars、no-undef这类错误一个都不报。打开终端跑npm run lint才发现一堆问题编辑器里却岁月静好。这不是插件坏了而是你把两个工具的职责搞混了。ESLint 管的是代码质量有没有用未定义的变量、有没有声明了却没用的变量、有没有在 if 里写赋值语句、React Hooks 依赖数组是否完整。Prettier 管的是代码风格缩进几个空格、单引号还是双引号、行尾要不要分号、一行超过多少字符换行。两者是互补关系不是替代关系。VS Code 的 ESLint 插件负责把 ESLint 的检查结果实时渲染成编辑器里的红色波浪线但它本身不包含 ESLint 的规则引擎。也就是说插件是显示器项目里node_modules下的eslint包才是主机。如果项目没装eslint依赖插件装了也白装编辑器不会报任何错。这就是为什么原文强调不能只安装 prettiereslint 插件一定要装——但更准确的说法是插件和依赖包两个都要有。Prettier 这边同理VS Code 的 Prettier 插件负责调用格式化能力项目里的prettier包负责提供规则和 CLI 命令。插件让你在编辑器里按ShiftAltF就能格式化包让你能在 CI 里跑prettier --check卡住不合规的提交。我试过的典型翻车场景一个 Vue3 项目同事只配了 Prettier提交的代码缩进完美但ref变量拼错名字、watch里用了未声明的函数全都没报错直到运行时才炸。所以这一篇的目标很明确把 VS Code 的settings.json、项目的.eslintrc、.prettierrc三份配置串起来再给出全量格式化和校验的命令最后演示保存自动修复的验证步骤。适合刚接触前端工程化、正在搭第一套规范的同学。2. TaoToken 前置准备给 ESLint 规则调试和 AI 辅助排障留一条通路配置 ESLint 和 Prettier 的过程中真正耗时间的往往不是写配置而是遇到报错时不知道规则名对应哪个插件、parserOptions该怎么填、某个规则在新版本里是不是被废弃了。这时候如果有一个能直接对话、能贴报错、能问规则语义的模型入口效率会高很多。TaoToken 在这里的角色是提供一个统一的模型调用入口你可以把它理解成一个模型网关拿到 API Key 之后用同一套 Base URL 和 Key 就能调用不同模型用来问 ESLint 规则、让模型帮你读.eslintrc报错、生成eslint --fix修不掉的代码改法。它不替代 VS Code也不替代 ESLint 本身只是在你卡住的时候给一个能对话的出口。前置准备分三步。第一步打开官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册账号这一步只是拿账号不涉及任何网络配置。第二步进入控制台创建 API Key地址是 https://taotoken.net/console/api-keys Key 只在创建时完整显示一次复制后先存到本地密码管理器。第三步如果你只是想验证模型能不能正常对话用模型对话页面 https://taotoken.net/models 直接发一条消息测试即可不需要写代码。对于长期要写前端工程化配置、经常需要模型辅助读报错的场景可以考虑 Coding Plan地址是 https://taotoken.net/coding-plan 它更适合高频编码和 Agent 类用法。如果你用的是 Claude Code 这类命令行工具接入文档在 https://taotoken.net/doc 里面有 Base URL 和 Key 的填写位置说明。这里要强调一点TaoToken 的 API 地址是 https://taotoken.net/api 注意这个地址不带任何查询参数配置时不要自己拼 UTM。Base URL、API Key、Model ID 这三件套在后面的配置片段里会反复出现尤其是如果你用 Cline、CC Switch 或 Codex 这类工具三者缺一不可。3. 可复制配置.vscode/settings.json、.eslintrc、.prettierrc 三件套这一节是全文的核心所有片段都可以直接复制。先明确目录结构项目根目录下建.vscode/settings.json团队共享的编辑器配置、.eslintrc.cjsESLint 规则、.prettierrcPrettier 规则、.eslintignore和.prettierignore忽略文件。先装依赖。用 npm 的话npm install -D eslint prettier eslint-plugin-vue typescript-eslint/parser typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier用 pnpm 的话把npm install -D换成pnpm add -D即可。这里的关键是eslint-config-prettier它的作用是关掉所有和 Prettier 冲突的 ESLint 风格规则避免两个工具互相打架。第一份配置.vscode/settings.json{ editor.formatOnSave: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: explicit }, eslint.validate: [ javascript, javascriptreact, typescript, typescriptreact, vue ], eslint.run: onType, prettier.requireConfig: true }逐行解释formatOnSave让保存时触发格式化defaultFormatter指定 Prettier 插件为默认格式化器codeActionsOnSave里的source.fixAll.eslint让保存时执行 ESLint 的自动修复。注意新版 VS Code 要求这个值写成explicit而不是true写true会提示已废弃。eslint.validate明确告诉插件要检查哪些语言Vue 项目必须把vue加进去否则.vue文件不报错。prettier.requireConfig设为 true 表示只有项目里存在.prettierrc时才格式化避免误格式化没有配置的仓库。第二份配置.eslintrc.cjsmodule.exports { root: true, env: { browser: true, es2022: true, node: true }, parser: vue-eslint-parser, parserOptions: { parser: typescript-eslint/parser, ecmaVersion: latest, sourceType: module }, extends: [ eslint:recommended, plugin:vue/vue3-recommended, plugin:typescript-eslint/recommended, plugin:prettier/recommended ], rules: { no-unused-vars: off, typescript-eslint/no-unused-vars: [warn, { argsIgnorePattern: ^_ }], no-console: process.env.NODE_ENV production ? warn : off, vue/multi-word-component-names: off } };extends数组的顺序很重要plugin:prettier/recommended必须放最后它会把prettier/prettier规则打开并把前面可能冲突的风格规则关掉。parser用vue-eslint-parserparserOptions.parser再指向 TypeScript 解析器这是 Vue3 TS 项目的标准写法。no-unused-vars关掉是因为 TS 项目要用typescript-eslint/no-unused-vars替代后者能识别类型声明。第三份配置.prettierrc{ semi: true, singleQuote: true, printWidth: 100, tabWidth: 2, trailingComma: es5, arrowParens: always, endOfLine: lf }endOfLine设成lf是为了跨平台一致Windows 上默认可能是crlf会导致 Git 里整文件 diff。trailingComma用es5而不是all是因为all在函数参数末尾也加逗号部分老工具链不认。忽略文件两份.eslintignore和.prettierignore内容可以一样dist node_modules public *.min.js coverage到这里三件套就齐了。如果你同时用 Cline 或 CC Switch 这类工具做 AI 辅助编码记得在它们的配置里填全 Base URLhttps://taotoken.net/api 、API Key、Model ID 三项缺一项都会连不上。4. 验证请求与成功结果保存自动修复 全量格式化命令配置写完不验证等于没写。这一节给出从单文件到全量的完整验证流程。先验证保存自动修复。新建一个src/test.js故意写一段有问题的代码const a 1 const b 2 function foo( ) { console.log( hello ) }保存这个文件。如果配置生效你会看到const b 2被 Prettier 格式化成const b 2缩进统一成 2 空格console.log里的空格被规整。同时a和foo声明未使用ESLint 会在变量名下方画黄色波浪线因为no-unused-vars设的是 warn。把鼠标悬停在波浪线上能看到规则名typescript-eslint/no-unused-vars这就说明 ESLint 插件和依赖包都在工作。如果保存后只格式化了但没报未使用变量说明eslint.validate没包含当前文件类型或者项目里没装eslint包。如果报了错但保存后没自动修检查codeActionsOnSave是否写成了explicit。再验证全量命令。npm 项目需要在package.json的scripts里配置因为 npm 不能直接运行node_modules/.bin下的命令而不经过脚本{ scripts: { lint: eslint . --ext .js,.ts,.vue, lint:fix: eslint . --ext .js,.ts,.vue --fix, format: prettier --write \src/**/*.{js,ts,vue,json,css,md}\, format:check: prettier --check \src/**/*.{js,ts,vue,json,css,md}\ } }然后运行npm run lint npm run lint:fix npm run formatlint只检查不修改lint:fix会尝试自动修复能修的规则。format用--write直接改写文件format:check只检查不写适合 CI 里用。pnpm 项目不需要配脚本可以直接跑pnpm eslint ./src/**/*.vue pnpm eslint --fix ./src/**/*.vue pnpm prettier --write ./src/**/*.*实测下来eslint --fix能修掉大部分风格类和部分质量问题比如自动加缺失的分号、把改成、删掉多余的空格。但像声明了未使用的变量这种--fix不会帮你删因为工具不知道你是真忘了用还是故意留着这类必须手动改。所以跑完lint:fix后再跑一次lint看还剩多少错误剩下的逐个点进去改。成功的结果长这样终端里npm run lint输出为空、退出码 0npm run format:check输出All matched files use Prettier code style!VS Code 里所有文件保存后无波浪线。到这一步ESLint 和 Prettier 的协作就算跑通了。5. 本篇常见错排查401、local proxy failed、reading choices、OAuth 对照配置过程中会遇到几类典型报错这里按真实错误信息对照排查。第一类401 Unauthorized或Invalid API key。如果你在 AI 辅助工具里配了 TaoToken出现 401 通常是 Key 复制不完整、Key 已删除、或者 Base URL 写错。检查三件套Base URL 必须是 https://taotoken.net/api Key 从 https://taotoken.net/console/api-keys 重新复制Model ID 填你实际要用的模型名。三者任一不对都会 401。注意 Base URL 不要带 UTM 参数带参数的地址是给网页访问用的API 调用会失败。第二类local proxy failed或connect ECONNREFUSED。这类报错和 ESLint 本身无关通常是工具里配了本地代理端口但代理没启动。检查工具的代理设置把本地代理关掉直连 https://taotoken.net/api 即可。不要在任何配置里写代理地址。第三类Cannot read properties of undefined (reading choices)。这个报错出现在 AI 工具解析响应时说明返回体结构不是预期的 OpenAI 格式。常见原因是 Base URL 填成了网页地址而不是 API 地址或者 Model ID 填了一个不存在的模型。把 Base URL 改成 https://taotoken.net/api Model ID 换成文档 https://taotoken.net/doc 里列出的可用模型名。第四类OAuth token expired或authentication failed。如果你用 Claude Code 或 Codex 这类工具它们可能走 OAuth 流程。检查工具版本按接入文档 https://taotoken.net/doc 里的说明重新走一遍授权。如果是 Codex 的auth.json确认里面的字段名和文档一致不要手动改结构。第五类ESLint 相关报错。Parsing error: Unexpected token通常是parserOptions.parser没配对Vue 项目要vue-eslint-parser套typescript-eslint/parser。Definition for rule prettier/prettier was not found说明没装eslint-plugin-prettier或者extends里没加plugin:prettier/recommended。File is ignored说明文件命中了.eslintignore检查忽略列表。第六类保存不自动修复。先确认 VS Code 右下角状态栏的 ESLint 图标是打勾不是打叉打叉说明插件没找到项目里的eslint包。再确认.vscode/settings.json里codeActionsOnSave的值是explicit。最后确认文件类型在eslint.validate列表里。排障时如果拿不准规则语义可以把报错贴到模型对话页面 https://taotoken.net/models 问一下比翻文档快。长期做工程化配置的话Coding Plan https://taotoken.net/coding-plan 更适合高频问答场景。6. 把规范固化下来从个人配置到团队共享配置跑通只是第一步真正让规范生效的是把它固化进团队流程。.vscode/settings.json提交到仓库后团队成员拉下来就自动生效不需要每个人手动配。.eslintrc.cjs和.prettierrc同理放在根目录所有人共用一套规则。再往前一步可以加 husky lint-staged在提交前自动跑eslint --fix和prettier --write只处理暂存区的文件速度快。这样即使有人编辑器没配好提交的代码也会被自动规整。CI 里加一步npm run lint和npm run format:check不合规直接卡住合并。回到最初的问题ESLint 和 Prettier 的关系一句话概括就是——Prettier 让代码好看ESLint 让代码正确两者通过eslint-config-prettier和plugin:prettier/recommended握手言和。VS Code 里两个插件都要装项目里两个包也都要装缺一个都会出现编辑器不报错或格式化了但有问题的割裂感。最后留一个实用技巧如果某个文件你确实不想被 ESLint 检查在文件顶部加/* eslint-disable */临时关闭但别长期留着容易变成技术债。规则冲突时优先改.eslintrc而不是关规则关规则一时爽后面接手的人会骂人。