ESLint 安装及添加配置：用 TaoToken 统一 Key 打通 AI 辅助代码检查

1. 从零装 ESLint为什么很多人第一步就卡住ESLint 是一个 JavaScript/TypeScript 代码检查工具它能在你保存文件或提交代码时按预设规则找出未使用变量、拼写错误、风格不一致等问题。适合谁适合刚接手一个前端项目、想统一团队代码风格、或者被 CI 流水线里 lint 报错拦住合并请求的开发者。我见过太多人卡在第一步npm init eslint/config跑完生成了一个.eslintrc.json但不知道每条规则什么意思改完又报新错最后干脆把 lint 脚本从 package.json 里删掉。这篇内容聚焦两件事第一从零安装 ESLint 并添加一份可复制的配置骨架覆盖 JavaScript、TypeScript、React 常见场景第二演示如何用 TaoToken 统一 Key 和 API 通道让 AI 工具辅助生成和校验 ESLint 配置减少反复查文档的时间。TaoToken 在这里的角色是统一入口你不需要在多个 AI 工具之间来回切换 Key一个 Key 就能调用模型对话、编码计划等能力把「查规则、改配置、验证报错」串成一条线。下面按实际落地顺序走先装依赖再写配置然后跑验证最后排错。每一步都有完整命令和参数说明你可以直接复制到项目里试。2. TaoToken 前置统一 Key 与 API 通道准备在让 AI 辅助生成 ESLint 配置之前先把 TaoToken 的 Key 准备好。这一步不复杂但顺序别搞反先拿 Key再配环境变量最后才在工具里调用。TaoToken 官网入口是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 这个不加 UTM。你需要做的是第一打开控制台创建 API Key。控制台地址带 deep linkhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 。在控制台里找到 API Keys 页面新建一个 Key复制保存。API Keys 页面地址https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。第二把 Key 写进环境变量不要硬编码在代码里。Linux/macOS 下export TAOTOKEN_API_KEY你的KeyWindows PowerShell$env:TAOTOKEN_API_KEY你的Key第三如果你用的是支持自定义 base_url 的 AI 编码工具把请求地址指向https://taotoken.net/apiKey 用上面那个。这样模型对话、编码计划等能力都走同一个通道不用每个工具单独配一遍。注意Key 只存在环境变量或本地配置文件里不要提交到 Git。团队协作时用.env.local并加入.gitignore。如果你只是想先验证模型能不能正常返回可以打开模型对话页面试一句https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。确认通道通了再进入 ESLint 配置环节。3. 可复制配置ESLint 安装命令与 .eslintrc 骨架3.1 安装依赖在项目根目录执行。如果你用 npmnpm install eslint --save-dev npm install typescript-eslint/parser typescript-eslint/eslint-plugin --save-dev npm install eslint-plugin-react eslint-plugin-react-hooks --save-dev如果你用 pnpmpnpm add -D eslint typescript-eslint/parser typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks版本说明ESLint 9 之后默认用 flat configeslint.config.js但很多存量项目还在用.eslintrc。下面给的是.eslintrc.json骨架兼容性更好适合从零接入的老项目和新项目过渡期。如果你确定用 ESLint 9可以把同样的规则迁移到eslint.config.js规则名不变。3.2 .eslintrc.json 配置骨架在项目根目录新建.eslintrc.json{ root: true, env: { browser: true, es2022: true, node: true }, parser: typescript-eslint/parser, parserOptions: { ecmaVersion: latest, sourceType: module, ecmaFeatures: { jsx: true } }, plugins: [typescript-eslint, react, react-hooks], extends: [ eslint:recommended, plugin:typescript-eslint/recommended, plugin:react/recommended, plugin:react-hooks/recommended ], settings: { react: { version: detect } }, rules: { no-unused-vars: off, typescript-eslint/no-unused-vars: [warn, { argsIgnorePattern: ^_ }], no-console: [warn, { allow: [warn, error] }], eqeqeq: [error, always], react/react-in-jsx-scope: off, react/prop-types: off }, ignorePatterns: [dist/, build/, node_modules/, *.min.js] }逐段解释关键参数。root: true表示这是根配置ESLint 不会再往上找父级配置。env里开 browser、es2022、node分别对应浏览器全局变量、最新语法、Node 全局变量。parser指定 TypeScript 解析器否则.ts文件解析会报错。extends是继承的规则集eslint:recommended是官方推荐后面三个是 TypeScript、React、React Hooks 的推荐规则。rules里覆盖具体规则no-unused-vars关掉改用 TypeScript 版本并允许下划线开头的参数忽略no-console允许 warn 和 erroreqeqeq强制用。3.3 添加 lint 脚本在package.json的scripts里加{ scripts: { lint: eslint . --ext .js,.jsx,.ts,.tsx, lint:fix: eslint . --ext .js,.jsx,.ts,.tsx --fix } }--ext指定要检查的文件扩展名--fix会自动修复能修的格式问题。3.4 用 TaoToken 辅助生成规则如果你不确定某条规则怎么写可以把需求描述给模型让它生成配置片段。比如在模型对话里输入「ESLint 规则禁止使用 var强制 const/letReact 组件必须用函数式给出 .eslintrc.json 的 rules 片段」。模型返回后你复制到rules里再跑npm run lint验证。这样比逐条查文档快而且能结合你项目的实际技术栈调整。4. 验证请求跑通 lint 并确认结果配置写完后先建一个测试文件src/test-lint.jsvar a 1; if (a 1) { console.log(hello); }执行npm run lint预期输出会报三类问题var被no-var或推荐规则提示、被eqeqeq报错、console.log被no-console警告。输出类似/src/test-lint.js 1:1 error Unexpected var, use let or const instead no-var 2:6 error Expected and instead saw eqeqeq 3:3 warning Unexpected console statement no-console看到这些报错说明 ESLint 已经生效。接着跑自动修复npm run lint:fix再打开文件var会变成let或const会变成。console.log不会被自动删因为它是警告级别需要你手动处理。如果你在 CI 里用把npm run lint加到流水线步骤里报错就阻断合并。这一步跑通后整个代码检查链路就闭环了。5. 本篇常见错排查5.1 报错「Parsing error: Cannot find module typescript-eslint/parser」原因依赖没装或装到了全局。解决在项目根目录重新执行npm install typescript-eslint/parser --save-dev确认node_modules里有这个包。不要用-g全局安装ESLint 插件必须项目本地安装。5.2 报错「Definition for rule react/react-in-jsx-scope was not found」原因plugins里没加react或者eslint-plugin-react没装。解决检查.eslintrc.json的plugins数组是否包含react并执行npm install eslint-plugin-react --save-dev。5.3 报错「ESLint couldnt find a configuration file」原因.eslintrc.json不在项目根目录或者文件名拼错。解决确认文件名是.eslintrc.json注意前面的点放在package.json同级目录。如果你用的是 monorepo子包需要自己的配置或继承根配置。5.4 规则不生效改了.eslintrc.json但报错没变原因ESLint 有缓存或者编辑器插件用的是旧配置。解决删掉.eslintcache如果有重启编辑器再跑npm run lint。VSCode 里确认 ESLint 插件已启用并且工作区根目录正确。5.5 用 TaoToken 调用模型时返回 401原因Key 没配或环境变量没生效。解决检查TAOTOKEN_API_KEY是否在当前终端会话里echo $TAOTOKEN_API_KEY看有没有值。如果用的是工具配置文件确认 base_url 指向https://taotoken.net/apiKey 没有多余空格。5.6 lint 通过但 CI 失败原因本地和 CI 的 Node 版本或依赖版本不一致。解决在 CI 配置里固定 Node 版本用npm ci而不是npm install确保package-lock.json提交到仓库。6. 把 AI 辅助接入日常检查流程配置跑通后你可以把 TaoToken 的模型对话能力接到日常流程里。比如每次改完.eslintrc.json把 diff 贴给模型让它检查规则冲突或者让模型根据你的报错日志给出修复建议。模型对话入口https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。如果你长期做编码和 Agent 类任务可以考虑 Coding Plan把模型调用额度集中管理https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有 base_url 和鉴权的完整说明。API Keys 管理页再放一次方便你直接跳https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。最后给一个实用技巧把npm run lint和npm run lint:fix绑到编辑器的保存动作上VSCode 里装 ESLint 插件后在settings.json加editor.codeActionsOnSave: { source.fixAll.eslint: true }。这样每次保存自动修格式你只需要关注修不掉的逻辑类报错。规则文件建议纳入版本控制团队统一用同一份.eslintrc.json避免「我本地不报错」的扯皮。