用途：配置 @tanstack/devtools-vite——为 TanStack Devtools 提供源码检查、控制台管道、增强日志、服务器事件总线、生产剥离、编辑器集成和插件市场的 Vite 插件。
主要能力：devtools() 返回一组子插件，全部 enforce: 'pre'，必须放在 Vite 配置插件数组首位。源码注入通过 AST 为 JSX 添加 data-tsd-source，支持检查热键跳转源码，可忽略文件与组件。控制台管道实现客户端与服务器双向转发，浏览器显示带 [Server] 前缀的服务器日志，终端显示带 [Client] 前缀的客户端日志。增强日志为 console.log/error 前置源码位置。生产剥离移除 devtools 相关导入与 JSX。服务器事件总线默认端口 4206，占用时回退随机端口，HTTPS 下复用 Vite 服务器。编辑器集成基于 launch-editor，默认 VS Code，可自定义。插件市场支持安装、注入插件与版本更新。
用法：pnpm add -D @tanstack/devtools-vite，然后在 vite.config.ts 中 import { devtools } 并置于 plugins 首位。可用 defineDevtoolsConfig 获得类型安全配置，选项涵盖 injectSource、consolePiping、enhancedLogs、removeDevtoolsOnBuild、eventBusConfig、editor 等。
限制：peer 依赖 vite ^6.0.0 || ^7.0.0，不适用于 webpack、rspack、esbuild 等其他打包器。源码注入等多数功能仅在开发模式且 serve 命令下生效，生产构建只保留剥离插件。带 {...props} 展开的元素不会注入 data-tsd-source。多项目并行时需显式设置不同 eventBusConfig.port 以避免端口冲突。具体收费、价格与使用效果资料未提供。