1. 从一次「提交前才发现缩进全乱」说起vue3 vite 项目跑起来很快但代码风格这件事vite 本身是不管的。我见过太多团队在项目中期才补 ESLint结果一跑npm run lint冒出几百条报错改到怀疑人生。更麻烦的是每个人的编辑器缩进、引号、分号习惯都不一样Code Review 时一半时间在争论「这里该不该换行」。ESLint 就是解决这个问题的它是一套可配置的代码检查规则引擎能在你写代码时、提交前、构建时三个节点拦住不规范写法。配合 vue3 的官方插件eslint-plugin-vue它能识别.vue单文件组件里的模板语法、script setup里的组合式 API 写法甚至能提示v-for缺 key、v-html有 XSS 风险这类问题。这篇面向的是刚用npm create vitelatest建完 vue3 项目、想一次性把 ESLint 配到位的前端开发者。我会给出可直接复制的.eslintrc.cjs、vite.config.ts骨架、.eslintignore以及npm run lint的验证动作。同时因为现在很多团队会用 AI 工具辅助生成规则、批量修复 lint 报错我会顺带讲怎么用 TaoToken 的统一 Key 把 AI 辅助检查这条链路接进来——不用在多个模型平台之间来回切 Key一个环境变量就能让脚本调用模型能力。先把结论放前面ESLint 配置本身不复杂难的是「规则集怎么选」和「报错怎么批量修」。前者靠一份成熟的规则文件后者可以借助 AI 通道提效。下面按从零到跑通的顺序来。2. 前置准备TaoToken 统一 Key 与项目初始化2.1 为什么这里会提到 TaoTokenESLint 的规则文件动辄两三百行手写不现实。实际工作中更常见的做法是让 AI 根据团队风格生成一份.eslintrc.cjs初稿或者把npm run lint的输出贴给模型让它给出批量修复建议。问题在于不同模型平台的 API Key、Base URL、计费方式都不一样脚本里写死一堆 Key 很难维护。TaoToken 提供的是统一 API 通道你拿到一个 Key通过https://taotoken.net/api这个入口就能调用模型能力环境变量里只维护一个TAOTOKEN_API_KEY。对于「AI 辅助代码检查」这种轻量场景省去了多平台配置的麻烦。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 需要看文档或领 Key 可以从这里进。需要说清楚TaoToken 在这里的角色是「AI 能力的调用通道」不是 ESLint 的替代品。ESLint 该装的包、该写的规则一个都不能少TaoToken 只是让你在「生成规则」和「修复报错」这两个环节少折腾。2.2 创建 vite 项目并装依赖如果你还没有项目先建一个npm create vitelatest vite-eslint-demo -- --template vue cd vite-eslint-demo npm install--template vue会生成 JavaScript 版的 vue3 项目。如果你用 TypeScript把模板换成vue-ts后面的 parser 配置也要相应调整这篇先以 JS 版为主TS 的差异我会在排障章节点出来。装 ESLint 相关依赖npm add -D eslint eslint-plugin-vue vite-plugin-eslint babel/core babel/eslint-parser这里几个包的分工要理清eslint是核心引擎eslint-plugin-vue提供 vue3 的规则集vite-plugin-eslint让 vite 在 dev server 运行时就能实时报错babel/eslint-parser负责解析现代 JS 语法避免 ESLint 遇到可选链、顶层 await 就报解析错误。2.3 配置 TaoToken 环境变量在项目根目录建一个.env.local记得加进.gitignore别把 Key 提交上去TAOTOKEN_API_KEY你的Key TAOTOKEN_BASE_URLhttps://taotoken.net/api如果你要在 Node 脚本里读取用dotenv加载即可。这样后续写一个scripts/fix-lint.mjs之类的辅助脚本时直接process.env.TAOTOKEN_API_KEY就能拿到不用在代码里硬编码。3. 可复制的 ESLint 配置骨架3.1 .eslintrc.cjs 完整配置在项目根目录新建.eslintrc.cjs。用.cjs后缀是因为项目package.json里如果有type: module.js会被当成 ESM而 ESLint 传统配置用 CommonJS 更稳。下面这份配置可以直接复制我按「基础环境 → 解析器 → 插件 → 规则」的顺序组织module.exports { root: true, env: { browser: true, es2021: true, node: true }, extends: [ eslint:recommended, plugin:vue/vue3-essential ], parserOptions: { ecmaVersion: latest, sourceType: module, parser: babel/eslint-parser, requireConfigFile: false }, plugins: [vue], rules: { vue/multi-word-component-names: [2, { ignores: [index] }], vue/max-attributes-per-line: [2, { singleline: 10, multiline: { max: 1 } }], vue/singleline-html-element-content-newline: 0, vue/multiline-html-element-content-newline: 0, vue/no-v-html: 0, no-console: 0, no-debugger: process.env.NODE_ENV production ? 2 : 0, no-unused-vars: [2, { vars: all, args: none }], no-undef: 2, no-redeclare: 2, no-dupe-keys: 2, no-duplicate-case: 2, no-empty-character-class: 2, no-fallthrough: 2, no-func-assign: 2, no-invalid-regexp: 2, no-irregular-whitespace: 2, no-mixed-spaces-and-tabs: 2, no-multi-spaces: 2, no-multiple-empty-lines: [2, { max: 1 }], no-trailing-spaces: 2, no-unreachable: 2, no-unsafe-finally: 2, no-useless-call: 2, no-useless-constructor: 2, no-whitespace-before-property: 2, no-with: 2, eqeqeq: [2, always, { null: ignore }], curly: [2, multi-line], dot-location: [2, property], eol-last: 2, indent: [2, 2, { SwitchCase: 1 }], quotes: [2, single, { avoidEscape: true, allowTemplateLiterals: true }], semi: [2, never], semi-spacing: [2, { before: false, after: true }], comma-dangle: [2, never], comma-spacing: [2, { before: false, after: true }], comma-style: [2, last], key-spacing: [2, { beforeColon: false, afterColon: true }], keyword-spacing: [2, { before: true, after: true }], space-before-blocks: [2, always], space-before-function-paren: [2, never], space-in-parens: [2, never], space-infix-ops: 2, space-unary-ops: [2, { words: true, nonwords: false }], object-curly-spacing: [2, always, { objectsInObjects: false }], array-bracket-spacing: [2, never], arrow-spacing: [2, { before: true, after: true }], block-spacing: [2, always], brace-style: [2, 1tbs, { allowSingleLine: true }], template-curly-spacing: [2, never], yoda: [2, never], prefer-const: 2, use-isnan: 2, valid-typeof: 2, wrap-iife: [2, any] } }几个关键点解释一下。root: true让 ESLint 停止向上级目录找配置避免被父目录的配置污染。extends里eslint:recommended是官方推荐规则plugin:vue/vue3-essential是 vue3 的基础规则集能捕获模板里的常见错误。parserOptions.parser指定用 babel parser 解析requireConfigFile: false表示不需要额外的 babel 配置文件省事。规则部分我做了取舍缩进用 2 空格indent: [2, 2]字符串用单引号行尾不加分号。这三条是团队协作里最容易统一的你可以按自己习惯改。no-console设为 0 是开发期方便调试生产构建时靠no-debugger拦截。3.2 .eslintignore 忽略清单根目录新建.eslintignorepublic node_modules src/assets dist *.min.jspublic和src/assets里通常是静态资源没必要检查dist是构建产物检查了也没意义。*.min.js是压缩文件ESLint 解析会报一堆错。3.3 vite.config.ts 接入 vite-plugin-eslint把 vite 配置改成下面这样。注意include要覆盖.vue和.js文件否则模板里的问题不会被实时检测import { defineConfig } from vite import vue from vitejs/plugin-vue import eslintPlugin from vite-plugin-eslint export default defineConfig({ plugins: [ vue(), eslintPlugin({ include: [src/**/*.js, src/**/*.vue, src/*.js, src/*.vue], exclude: [node_modules, dist], cache: false, failOnError: false }) ], resolve: { alias: { : /src } } })failOnError: false表示 lint 报错时 dev server 不直接崩只在终端和浏览器 overlay 里提示。如果你希望严格一点改成true报错就中断构建。cache: false是开发期避免缓存导致改了规则不生效项目稳定后可以打开提速。3.4 package.json 加 lint 脚本在scripts里加一行{ scripts: { dev: vite, build: vite build, preview: vite preview, lint: eslint --ext .js,.vue --ignore-path .eslintignore --fix src } }--fix会自动修复能修的规则缩进、引号、分号这类格式问题修不了的才报出来。--ext指定检查的文件扩展名--ignore-path指向忽略文件。4. 验证请求跑通 npm run lint 与 AI 辅助修复4.1 制造一个错误来验证先故意在src/App.vue里写点不规范的代码比如用双引号、加分号、缩进乱掉script setup import HelloWorld from ./components/HelloWorld.vue; const msg hello; /script template HelloWorld :msgmsg / /template然后跑npm run lint预期输出类似/src/App.vue 2:26 error Strings must use singlequote quotes 2:32 error Extra semicolon semi 3:1 error Expected indentation of 0 spaces but found 2 indent因为带了--fix再跑一次npm run lint能自动修的会被改掉剩下的才是需要手动处理的。这就是 ESLint 的日常工作流写完代码跑一次格式问题自动修逻辑问题手动看。4.2 用 TaoToken 通道辅助生成规则和修复当规则文件需要大改或者npm run lint输出几十条同类报错时可以写个小脚本把上下文发给模型。下面是一个最小示例用 Node 的fetch调用 TaoToken 的 API 入口// scripts/ai-lint-helper.mjs const apiKey process.env.TAOTOKEN_API_KEY const baseUrl process.env.TAOTOKEN_BASE_URL || https://taotoken.net/api async function askModel(prompt) { const res await fetch(${baseUrl}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${apiKey} }, body: JSON.stringify({ model: claude-sonnet-4-20250514, messages: [ { role: system, content: 你是前端代码规范专家只输出可执行的 ESLint 配置或修复建议。 }, { role: user, content: prompt } ] }) }) const data await res.json() return data.choices?.[0]?.message?.content ?? } const lintOutput process.argv[2] || askModel(以下是我的 ESLint 报错输出请给出批量修复思路\n${lintOutput}) .then(console.log) .catch(console.error)运行方式npm run lint 21 | tee lint.log node scripts/ai-lint-helper.mjs $(cat lint.log)这样模型拿到的是真实的报错上下文给出的修复建议更贴合你的项目。注意model字段按 TaoToken 文档里支持的模型名填不同模型对代码的理解能力有差异实测下来代码类任务用 Claude 系列比较稳。如果你更想直接在对话界面里贴报错、拿建议可以走模型对话入口https://taotoken.net/api?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewrite 。长期做编码辅助、想让 AI 持续参与 lint 修复的可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewrite 。4.3 编辑器侧的高亮提示VS Code 装 ESLint 插件后不用额外配置它会自动读取项目根目录的.eslintrc.cjs。红色波浪线是 error黄色是 warning鼠标悬停能看到规则名。配合editor.codeActionsOnSave设置保存时自动--fix{ editor.codeActionsOnSave: { source.fixAll.eslint: explicit } }这样大部分格式问题在保存瞬间就没了npm run lint只用来做提交前的兜底检查。5. 本篇常见错排查5.1 Parsing error: Unexpected token最常见的原因是 parser 没配对。如果你用了可选链?.、空值合并??或者script setup里的顶层 await而parserOptions.parser没指定babel/eslint-parserESLint 就会报解析错误。检查.eslintrc.cjs里有没有这两行parser: babel/eslint-parser, requireConfigFile: false如果项目是 TypeScriptparser 要换成typescript-eslint/parser并装typescript-eslint/eslint-pluginextends 里加plugin:typescript-eslint/recommended。5.2 Definition for rule vue/xxx was not found说明eslint-plugin-vue没装或者版本太老。先确认package.json的 devDependencies 里有它然后检查plugins: [vue]和extends里的plugin:vue/vue3-essential是否都写了。vue3 项目必须用vue3-essential或vue3-recommended写成plugin:vue/essential是 vue2 的规则集部分规则在 vue3 里不存在。5.3 vite-plugin-eslint 不报错三个排查方向。第一include路径没覆盖到你的文件比如只写了src/**/*.js漏了.vue。第二exclude把src排除了。第三vite 的缓存没清删掉node_modules/.vite重启 dev server。另外failOnError: false时错误只显示在终端和 overlay不会中断服务别以为是没生效。5.4 npm run lint 报错但编辑器不报通常是编辑器打开的目录不是项目根目录ESLint 插件找不到.eslintrc.cjs。VS Code 里看左下角确认工作区根目录就是项目根目录。还有一种情况是插件版本和 ESLint 版本不兼容把 VS Code 的 ESLint 插件更新到最新或者看输出面板里 ESLint 的日志。5.5 --fix 改完还是报错--fix只能修格式类规则逻辑类规则比如no-unused-vars、no-undef它不动。这类报错要手动处理未使用的变量删掉或加下划线前缀未定义的变量检查是不是漏了 import。如果某条规则你暂时不想管在.eslintrc.cjs的 rules 里把它设为 0或者在代码行尾加// eslint-disable-next-line 规则名局部关闭。6. 把这条链路固化下来配置跑通之后建议做两件事让它真正落地。第一在package.json里加pre-commit: npm run lint配合 husky提交前自动检查避免不规范代码进仓库。第二把.eslintrc.cjs和.eslintignore提交到版本库团队所有人共用一份规则新人 clone 下来直接就是统一风格。AI 辅助这块TaoToken 的价值在于把「生成规则初稿」和「批量修复报错」这两个环节的调用成本降下来。你只需要在环境变量里维护一个 Key脚本里通过https://taotoken.net/api这个入口调用不用为每个模型单独配一套凭证。需要看接入细节的可以翻文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewrite Key 的管理在控制台https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewrite API Keys 页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewrite 。最后留一个我踩过的坑.eslintrc.cjs里的indent规则和 VS Code 默认的 tab 设置经常打架如果保存后缩进反复横跳检查 VS Code 的editor.insertSpaces和editor.tabSize是否和 ESLint 规则一致。两边对齐了保存自动修复才不会来回改。