1. 为什么 CRA 项目一到多人协作就乱套create-react-app 脚手架把 webpack、babel、eslint 都封装好了开箱即用确实省心但它默认的 eslint 配置只覆盖了最基础的规则团队里每个人写代码的习惯又不一样有人喜欢双引号有人坚持单引号有人每行结尾必加分号有人觉得分号是噪音缩进用 2 空格还是 4 空格、tab 还是 space能吵一整天。结果就是 git diff 里一半是业务逻辑一半是格式改动code review 的时候根本看不清谁改了什么。这个问题的本质不是谁对谁错而是缺少一个自动执行的约束层。光靠口头约定没用靠人肉 review 更不现实。正确的做法是把格式化交给 prettier把代码规范交给 eslint再用 husky lint-staged 在 commit 前自动跑一遍让不合规的代码根本提交不上去。我这次要交付的是一套可以直接复制到 CRA 工程里的配置骨架.eslintrc新版 flat config 用eslint.config.mjs、prettier 配置、husky 钩子、VS Code 的settings.json以及一个统一的 Key/API 通道接入方式。适合正在用 create-react-app 做团队项目、被代码风格问题困扰的前端同学。整套流程在 Node 18.18 以上、非 TypeScript 的 CRA 项目里实测可用。需要说明的是eslint 和 prettier 的分工要拎清楚eslint 管代码质量和规范比如未使用变量、react 相关规则prettier 只管格式美化引号、分号、缩进、换行。两者职责不重叠配置的时候不要互相打架。2. TaoToken 统一 Key 接入给团队一个稳定的 API 通道在讲配置之前先解决另一个团队协作里的隐形成本如果项目里要用到大模型能力比如代码补全、AI 辅助 review、自动化脚本调用模型每个人各自去申请 Key、各自配环境变量很快就会乱成一锅粥——有人把 Key 硬编码进代码有人本地能跑线上报错有人额度用完了别人还不知道。TaoToken 在这里的角色是提供一个统一的 API 通道团队只需要维护一份 Key通过标准的 OpenAI 兼容接口调用不用每个人单独折腾。它的官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 入口是 https://taotoken.net/api 接入方式和常见的 OpenAI SDK 一致改一下 base_url 和 api_key 就能用。对 CRA 项目来说典型用法是在.env.local里放一个环境变量然后在需要调用模型的地方读取。注意 CRA 只暴露以REACT_APP_开头的变量给前端代码所以命名要遵守这个约定。如果是纯前端调用Key 会暴露在浏览器里生产环境建议走自己的后端中转如果只是本地开发脚本或 CI 里用直接读环境变量就行。先把 Key 拿到手登录后进入控制台在 API Keys 页面创建一个新 Key复制保存好页面只显示一次。控制台地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 创建 Key 的页面是 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。如果你只是想先验证模型能不能通可以直接在模型对话页面试一下 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 。拿到 Key 之后在项目根目录建一个.env.local记得加进.gitignore# .env.local REACT_APP_TAOTOKEN_API_KEYsk-你的key REACT_APP_TAOTOKEN_BASE_URLhttps://taotoken.net/api然后在代码里这样读// src/utils/aiClient.js const apiKey process.env.REACT_APP_TAOTOKEN_API_KEY const baseURL process.env.REACT_APP_TAOTOKEN_BASE_URL export async function chat(prompt) { const res await fetch(${baseURL}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${apiKey}, }, body: JSON.stringify({ model: gpt-4o-mini, messages: [{ role: user, content: prompt }], }), }) if (!res.ok) throw new Error(请求失败: ${res.status}) return res.json() }这样团队里所有人共用一份 Key换 Key 只改一个地方。如果你需要长期在编辑器里做 AI 辅助编码可以考虑 Coding Plan接入方式在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 有说明Claude Code 相关的接入配置参考 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。3. 可复制的配置骨架eslint prettier husky这一节是全文的核心所有配置都可以直接抄。先确认 Node 版本在 18.18 以上否则新版 eslint 的 flat config 会有兼容问题。3.1 安装依赖在 CRA 项目根目录执行npm install --save-dev eslint prettier husky lint-staged eslint/js globals eslint-plugin-react如果你用的是 craco很多 CRA 项目为了改 webpack 配置会引入package.json的 scripts 里 start/build/test 会指向 craco这不影响 eslint 配置。参考的package.json关键片段{ scripts: { start: craco start, build: craco build, lint: eslint src -c eslint.config.mjs --fix, prepare: husky, lint:lint-staged: lint-staged }, lint-staged: { src/**/*.{ts,tsx,js,jsx}: [ prettier --write, eslint -c eslint.config.mjs --fix, git add ] } }注意prepare脚本写的是husky这是 husky v9 的新写法老版本是husky install别抄错了。3.2 eslint flat config新版 eslint 用eslint.config.mjs替代了.eslintrc。可以用官方命令生成初始配置npm init eslint/configlatest生成后手动加上自定义规则。完整的eslint.config.mjsimport globals from globals import pluginJs from eslint/js import pluginReact from eslint-plugin-react /** type {import(eslint).Linter.Config[]} */ export default [ { files: [**/*.{js,mjs,cjs,jsx}] }, { languageOptions: { globals: globals.browser } }, pluginJs.configs.recommended, pluginReact.configs.flat.recommended, { rules: { react/prop-types: off, react/react-in-jsx-scope: off, no-undef: off, no-unused-vars: off, }, }, ]这里几个规则说明一下react/prop-types关掉是因为非 TS 项目里写 propTypes 太啰嗦react/react-in-jsx-scope关掉是因为 React 17 之后 JSX 不再需要手动 import Reactno-undef关掉是因为 CRA 的全局变量比如process.env容易误报no-unused-vars关掉是重点——这个规则默认开启会导致你声明了但暂时没用的变量直接让 commit 失败团队协作时经常踩这个坑先关掉需要的话再单独开。3.3 prettier 配置在项目根目录建.prettierrc{ singleQuote: true, jsxSingleQuote: true, semi: false, useTabs: true, tabWidth: 4, printWidth: 120, bracketSameLine: true }这套配置的含义单引号、JSX 也用单引号、行尾不加分号、用 tab 缩进、tab 宽度 4、每行最多 120 字符、JSX 的不换行。你可以按团队喜好改但一旦定下来就不要再动否则全量格式化会产生巨大的 diff。3.4 husky lint-staged 钩子初始化 huskynpx husky init这会在.husky/目录下生成pre-commit文件。把它改成# .husky/pre-commit npm run lint:lint-staged配合package.json里的lint-staged配置每次 commit 时只会对暂存区的文件跑 prettier 和 eslint速度快不会拖慢提交。3.5 VS Code 用户设置在 VS Code 里装两个插件ESLintdbaeumer.vscode-eslint和Prettier - Code formatteresbenp.prettier-vscode。然后在settings.json里加{ prettier.singleQuote: true, prettier.jsxSingleQuote: true, prettier.semi: false, prettier.useTabs: true, prettier.tabWidth: 4, prettier.printWidth: 120, prettier.bracketSameLine: true, editor.defaultFormatter: esbenp.prettier-vscode, editor.codeActionsOnSave: { source.fixAll.eslint: always }, editor.formatOnSave: true, eslint.format.enable: false }这样保存文件时自动格式化 自动修复 eslint 问题写代码的时候就已经是合规的了commit 时基本不会报错。4. 验证请求本地 lint 与格式化实测配置写完得验证它真的生效。分三步走。第一步手动跑一次 lintnpm run lint如果代码里有格式问题eslint 会尝试自动修复--fix参数修复不了的会打印出来。第一次跑可能会改很多文件这是正常的。第二步测试 prettier 格式化。随便找个文件故意写成双引号加分号const name taotoken;保存后如果 VS Code 配置生效应该自动变成const name taotoken第三步测试 commit 钩子。故意写一段不合规的代码比如声明一个没用到的变量然后git add再git commit。如果 husky 配置正确会看到 lint-staged 跑起来eslint 报错commit 被拦截。把问题修掉再 commit就能成功。验证 TaoToken 通道是否通可以写个临时脚本node -e const key process.env.REACT_APP_TAOTOKEN_API_KEY; fetch(https://taotoken.net/api/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer key }, body: JSON.stringify({ model: gpt-4o-mini, messages: [{ role: user, content: ping }] }) }).then(r r.json()).then(d console.log(d.choices[0].message.content)); 注意这个脚本要在能读到.env.local的环境里跑或者直接把 Key 传进去。返回正常内容就说明通道没问题。5. 本篇常见错排查配置过程中最容易踩的坑我整理成表格对照报错现象原因解决eslint: command not found没装 eslint 或没在项目根目录跑npm install --save-dev eslint确认在根目录执行commit 被拦截提示no-unused-vars该规则默认开启在eslint.config.mjs里加no-unused-vars: offhusky 钩子不触发prepare脚本没跑或写错执行npm run prepare确认是husky不是husky installprettier 和 eslint 打架两者都管格式关掉 eslint 的格式类规则格式全交给 prettierVS Code 保存不格式化默认格式化器没设对检查editor.defaultFormatter是否为 prettierREACT_APP_变量读不到变量名没加前缀或没重启CRA 只暴露REACT_APP_开头的变量改完要重启 dev serverflat config 报语法错误Node 版本太低升级到 18.18 以上还有一个隐蔽的坑如果你之前有.eslintrc.json或.eslintrc.js新版 eslint 会优先读eslint.config.mjs旧文件不生效但也不报错容易让人以为配置没起作用。确认一下根目录只有一份配置文件。6. 把校验流程固化下来整套配置跑通之后团队协作的体验会有明显变化新人 clone 下来npm installhusky 自动装好钩子VS Code 打开就按统一格式写代码commit 前自动校验不合规的代码根本进不了仓库。代码风格这件事从靠自觉变成了靠工具review 的时候也能专注在业务逻辑上。如果项目里还要接入大模型能力统一用 TaoToken 的 Key 通道团队维护一份配置就够了。需要长期在编辑器里做 AI 辅助编码的话Coding Plan 的接入方式在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 有详细说明API 层面的接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite Key 管理在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。配置骨架先落地后面加什么能力都是在这个基础上扩展。