企业官网建设流程全解析

1. React 项目里保存自动格式化，为什么总配不干净

在 React 项目里写 JavaScript/TypeScript，最影响手感的往往不是业务逻辑，而是每次改完代码还要手动跑npm run lint --fix。我见过太多项目，ESLint 能报错，但保存时就是不自动修；或者 Prettier 装了，.tsx文件却纹丝不动。核心原因通常有三个：VS Code 的settings.json没写对、ESLint 与 Prettier 的职责边界没分清、以及多工具（ESLint、Prettier、TypeScript、AI 补全插件）各自要配一套 Key 和通道，配置分散导致排查困难。

这篇要解决的就是这个场景：React 项目在 VS Code 中按下Ctrl+S（macOS 为Cmd+S）后，JavaScript/TypeScript/TSX 自动格式化，同时把多工具需要的模型通道统一到 TaoToken 的 Key/API 上，避免每个插件各填一份配置。适合正在用 React + TypeScript、被保存格式化折腾过、或者想让 AI 编码工具和格式化链路共用一套接入配置的开发者。下面从环境准备到可复制的settings.json、config.toml骨架，再到验证和排错，一步步来。

2. 前置准备：TaoToken 统一 Key 与 API 通道

在动手改 VS Code 配置之前，先把“通道”这件事理清楚。React 项目里常见的工具链包括 ESLint、Prettier、TypeScript Language Server，以及可选的 AI 编码助手。如果每个工具都单独申请 Key、单独填 Base URL，后期换环境或团队协作时非常容易漏配。TaoToken 的作用就是提供统一的 Key 和 API 通道，让这些工具指向同一个入口。

你需要先拿到一个可用的 Key。打开 TaoToken 官网https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，注册后在控制台创建 API Key。控制台地址是https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite，Key 管理页在https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite。API 基础地址统一用https://taotoken.net/api，注意这个地址不带 UTM 参数，直接写进配置文件即可。

注意：Key 属于敏感信息，不要提交到 Git 仓库。建议放在系统环境变量或本地未跟踪的.env.local中，VS Code 配置里用变量引用。

如果你只是想让格式化链路跑通，ESLint + Prettier 本身不需要联网；但一旦你同时使用 AI 补全、代码解释、Agent 类工具，它们就需要模型通道。把 Key 统一到 TaoToken 后，你只需要维护一份凭证，换机器时复制环境变量即可。想先验证模型通道是否可用，可以直接打开模型对话页https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite发一条测试消息，确认返回正常再继续。

3. 可复制配置：settings.json 与 config.toml 骨架

这一节是全文的核心，直接给可复制的配置。先装两个 VS Code 扩展：ESLint（dbaeumer.vscode-eslint）和Prettier - Code formatter（esbenp.prettier-vscode）。装完后按Ctrl+Shift+P（macOS 为Cmd+Shift+P），输入Preferences: Open User Settings (JSON)，在打开的 JSON 里合并以下内容。

{ "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "editor.tabSize": 2, "editor.detectIndentation": false, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "typescript.updateImportsOnFileMove.enabled": "always", "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ] }

这里有几个关键点。editor.defaultFormatter设为 Prettier，保证没有语言级覆盖时默认走 Prettier；editor.codeActionsOnSave里的source.fixAll.eslint负责保存时执行 ESLint 可自动修复的规则；eslint.validate明确让 ESLint 检查 TS/TSX，否则 React + TypeScript 项目里.tsx可能不被校验。职责划分记住一句话：ESLint 定义风格与规则，Prettier 负责按规则落地格式化。

项目根目录还需要一份 Prettier 配置，避免不同成员默认值不一致。新建.prettierrc：

{ "semi": true, "singleQuote": true, "trailingComma": "es5", "printWidth": 100, "tabWidth": 2 }

如果你同时使用支持 TOML 配置的 AI 编码工具或 CLI，可以准备一份config.toml骨架，把模型通道统一指向 TaoToken：

# config.toml 骨架，按工具实际字段名调整 [api] base_url = "https://taotoken.net/api" api_key = "${TAOTOKEN_API_KEY}" model = "claude-sonnet" [editor] format_on_save = true formatter = "prettier"

${TAOTOKEN_API_KEY}从环境变量读取，这样配置文件可以安全地提交到团队仓库。长期做编码或 Agent 类任务的话，可以了解 Coding Planhttps://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite，把额度与通道统一管理，减少多工具重复配置。

4. 验证请求：保存即格式化的成功结果

配置写完后必须验证，否则很容易出现“以为配好了其实没生效”。打开 React 项目里的src/App.tsx或任意.ts文件，故意写一段格式混乱的代码：

const list = [1,2,3] function add(a:number,b:number){return a+b} console.log( "hello" ) console.log( "world" )

按下Ctrl+S（macOS 为Cmd+S）。如果配置生效，你会看到分号被补上、引号统一、缩进对齐，结果类似：

const list = [1, 2, 3]; function add(a: number, b: number) { return a + b; } console.log('hello'); console.log('world');

如果 ESLint 规则里有可自动修复项（比如未使用变量提示、import 排序），保存时也会一并处理。想手动触发单个文件格式化，用Shift+Alt+F（macOS 为Shift+Option+F），或在命令面板输入Format Document。验证 AI 通道是否也通了，可以在模型对话页https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite发一条消息，确认返回正常。接入细节和字段说明可以对照接入文档https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite，里面有 Base URL、鉴权头和常见参数示例。

5. 本篇常见错排查

保存不格式化，八成是下面几种情况。第一种，settings.json里语言级配置覆盖了全局默认，比如[typescript]里写了别的 formatter，导致 Prettier 不生效。检查方式是命令面板执行Format Document With...，看当前文件实际用的是哪个 formatter。第二种，ESLint 扩展没在 TS/TSX 上激活，表现为 Prettier 格式化了但 ESLint 规则没修。确认eslint.validate包含typescriptreact，并且项目根目录有.eslintrc或eslint.config.js。

第三种，Prettier 与 ESLint 规则冲突，保存后反复横跳。典型是引号规则：Prettier 配了singleQuote: true，ESLint 却要求双引号。解决办法是让 ESLint 不负责纯格式规则，用eslint-config-prettier关掉冲突项，在.eslintrc的extends末尾加上"prettier"。第四种，Key 或 Base URL 填错导致 AI 工具报 401/404。先确认 API 地址是https://taotoken.net/api，再检查环境变量是否真的注入到了 VS Code 进程（改完环境变量要重启 VS Code）。第五种，保存时格式化很慢，通常是formatOnSave对大文件全量跑 Prettier，可以在项目级.vscode/settings.json里对特定目录关闭，而不是全局关掉。

提示：团队协作时把.vscode/settings.json、.prettierrc、.eslintrc一起提交，个人偏好放用户级settings.json，这样新人拉代码就能保存即格式化。

6. 把配置沉淀成可复用模板

走到这里，React 项目在 VS Code 里保存自动格式化 JavaScript/TypeScript 已经能稳定工作。真正省时间的做法是把这套配置沉淀成模板：项目级.vscode/settings.json管格式化与 ESLint，.prettierrc管风格，config.toml管模型通道，Key 走环境变量。这样换项目、换机器、团队协作都只需要复制文件加一个环境变量。如果你还在用多个工具各自填 Key，建议先去 API Keys 页https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite统一管理，再对照接入文档把 Base URL 和鉴权头核对一遍。格式化链路跑顺之后，AI 编码工具和 Agent 任务也能共用同一套通道，少一处配置就少一个半夜排查的坑。