Turborepo 搭配 Ultracite用 Biome 预设统一 Monorepo 的 Lint 与格式化with-ultracite 示例详解【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址: https://gitcode.com/gh_mirrors/tu/turbo本文以 Turborepo 官方示例仓库 examples/with-ultracite/README.md 为主体完整讲解这套 Turborepo Ultracite 示例的搭建方式、目录结构、turbo.json任务编排与 Biome/Ultracite 配置细节。读完你可以直接复现该 Monorepo创建两个共享组件库的 Next.js 应用用 Ultracite 一条命令完成全仓 lint 与格式修复并用 Turborepo 的任务依赖、缓存与远程缓存机制把这套流程串成可协作的工程链路。1. 示例定位这套示例是什么with-ultracite是 Turborepo 仓库中的一个社区维护示例其元数据 meta.json 给出了官方描述Basic monorepo example with two Next.js applications and integrated Ultracite configurationmaintainedByCoreTeam: false即由社区维护它的核心特征是在标准的 Turborepo Monorepo 骨架上把代码质量工具从 ESLint 体系换成了 Ultracite。Ultracite 是一个基于 Biome 能力的 lint/format 解决方案提供了core、react、next等开箱即用的预设。该示例展示了如何把这种单仓统一配置的质量工具与 Turborepo 的任务系统tasks、缓存、过滤、远程缓存结合起来。1.1 获取方式按照 README 说明使用create-turbo脚手架即可拉取该示例npx create-turbolatest -e with-ultracite1.2 版本前提当前仓库中该示例的根 package.json 声明了明确的运行环境前提复现或升级时需要注意packageManager:pnpm11.22.0依赖workspace:*协议必须用 pnpmengines.node:24关键 devDependenciesturbo2.10.11、ultracite7.10.5、biomejs/biome2.5.9、typescript7.0.22. 仓库结构Apps 与 Packages该 Turborepo 包含以下应用和包与 README 的 Whats inside? 一节一致名称类型说明docsNext.js 应用运行在 3001 端口的文档站应用webNext.js 应用运行在 3000 端口的业务应用repo/uiReact 组件库被web与docs两个应用共享repo/typescript-config配置包提供全仓共用的tsconfig.json基础配置工作区划分由 pnpm-workspace.yaml 定义packages: - apps/* - packages/*每个包都是 100% TypeScript。两个应用通过workspace:*协议引用共享库与配置包见 apps/web/package.jsondependencies: { repo/ui: workspace:*, next: 16.3.1, react: 19.2.8, react-dom: 19.2.8 }, devDependencies: { repo/typescript-config: workspace:*, typescript: 7.0.2 }repo/ui是一个 stub 组件库其 package.json 通过exports直接暴露源码供 Next.js 侧编译transpilename: repo/ui, exports: { ./*: ./src/*.tsx }源码包含Button、Card、Code三个组件例如 button.tsx 是一个带appName属性、点击时打印日志的按钮组件——这正是 Ultracite 规则需要检查的典型 React 代码如useCallback依赖、typebutton属性等。2.1 TypeScript 配置的继承链repo/typescript-config提供三层配置全部以继承 覆盖方式组织base.json全仓基础配置开启strict、noUncheckedIndexedAccess、isolatedModules模块体系为NodeNexttarget/lib为ES2022nextjs.jsonextends: ./base.json改为module: ESNextmoduleResolution: Bundler、jsx: preserve、noEmit: true并注册 Next.js 的 TS 插件react-library.jsonextends: ./base.json仅追加jsx: react-jsx供repo/ui这类纯 React 库使用。两个应用的tsconfig.json如 apps/web/tsconfig.json再继承nextjs.json并额外开启strictNullChecks、把.next/types/**/*.ts纳入检查范围。这条base → nextjs → 应用级的三级继承链是 Turborepo 模板中共享类型配置的标准做法。3. Ultracite 配置biome.jsonc 如何接入预设整个示例的 Ultracite 配置只有一个文件——根目录的 biome.jsonc{ $schema: https://biomejs.dev/schemas/2.5.9/schema.json, extends: [ ultracite/biome/core, ultracite/biome/react, ultracite/biome/next ], files: { // Static assets served by Next.js are not source code. includes: [!**/public] } }配置要点拆解预设叠加extends 链ultracite/biome/core提供通用 JS/TS 规则与格式化器配置ultracite/biome/react叠加 React 生态规则ultracite/biome/next再叠加 Next.js 专属规则。三个预设按序合并后加载的覆盖先加载的同名项——这是 Ultracite 分层预设设计的关键项目侧只需声明用了哪些栈不需要手写几十条 Biome 规则。文件范围裁剪files.includes[!**/public]用 Biome 的 glob 语法排除了两个 Next.js 应用的public/目录——那里放的是turborepo-dark.svg、next.svg等静态资源不是源码不应参与 lint。这一条负向 glob 是接入 Ultracite 时最实用的本地化调整之一。JSONC 格式文件名是.jsonc配置内可以写注释如上Biome 原生支持这种带注释的配置格式。schema 校验$schema指向 Biome 2.5.9 的官方 schema与根package.json中锁定的biomejs/biome2.5.9版本对应编辑器可获得补全与校验。从配置结构看Ultracite 在这里完全复用了 Biome 的配置入口biome.jsonc差异在于规则来源是 Ultracite 发布的预设而非手写——这使团队可以把规则演进交给 Ultracite 的版本升级而本地文件保持极简。4. turbo.json任务编排中的 Ultracite 集成根 turbo.json 是本文最值得逐行看的部分它展示了 Ultracite 如何嵌入 Turborepo 任务系统{ $schema: https://turborepo.dev/schema.json, ui: tui, tasks: { build: { dependsOn: [^build], inputs: [$TURBO_DEFAULT$, .env*], outputs: [.next/**, !.next/cache/**, !.next/dev/**] }, //#check: {}, //#fix: { cache: false }, check-types: { dependsOn: [^check-types] }, dev: { cache: false, persistent: true } } }4.1 根级任务Root/Global Task//#check与//#fix//#check与//#fix使用了 Turborepo 的根任务命名约定//#前缀在 docs/crafting-your-repository/configuring-tasks 中有对应文档。这类任务只在仓库根目录定义、不分布到各工作区典型用途正是 Ultracite 这类单仓统一配置的 lint 工具——Biome 本身就在根目录读biome.jsonc扫全仓没有必要在每个包里重复注册任务。这与根 package.json 中的脚本一一对应scripts: { build: turbo run build, check: ultracite check, fix: ultracite fix, check-types: turbo run check-types, dev: turbo run dev }也就是说 README 中给出的两条命令pnpm check # ultracite check检查全仓 lint 与格式问题 pnpm fix # ultracite fix自动修复实际执行的是 Ultracite CLI底层为 Biome 引擎而非turbo run check。根任务注册的作用在于让 Turborepo 认识这些任务你可以用turbo run check触发它并纳入turbo run all之类的批量执行。4.2//#fix为什么cache: false//#fix显式关闭了缓存。这是合理的fix是修改源文件的写操作其输出不可安全地缓存复用而//#check只读保留默认缓存即可。作为对照with-biome 示例 的写法是把lint任务下沉到每个工作区lint: { dependsOn: [^lint] }由各包自己的lint脚本执行而 with-ultracite 选择了根级单点执行因为 Ultracite 的配置模型是单仓单配置文件两种模式各有适用场景。4.3 其余任务与标准 Turborepo 模板一致builddependsOn: [^build]保证先构建上游依赖包如repo/uiinputs在默认输入之外额外加入.env*outputs声明.next/**为产物并排除缓存目录用于增量缓存判断check-typesdependsOn: [^check-types]逐包执行tsc --noEmit应用侧还先跑next typegen生成类型devpersistent: true, cache: false两个next dev常驻进程分别占用 3000/3001 端口对应 apps/web/package.json 与 apps/docs/package.json 的dev脚本。5. 日常使用流程build / dev / check / fix / 远程缓存5.1 构建与开发cd my-turborepo turbo build # 按依赖图构建所有 apps 与 packages turbo dev # 并行启动 web(:3000) 与 docs(:3001)5.2 Lint 与格式化pnpm check # 只检查不改动文件适合 CI pnpm fix # 自动修复可修复项含格式化由于 Ultracite 配置位于根目录、扫描范围覆盖apps/*与packages/*下的全部 TS/TSX 源码排除public/静态资源一次pnpm check即可覆盖web、docs、repo/ui三包若需要同时做类型检查再叠加pnpm check-types走turbo run check-types按^check-types依赖序在各包内执行。5.3 远程缓存Remote CachingREADME 还介绍了 Turborepo 的远程缓存能力默认情况下 Turborepo 只做本地缓存登录 Vercel 账号后可以为团队与 CI/CD 共享构建缓存。操作步骤cd my-turborepo turbo login # 用 Vercel 账号认证 Turborepo CLI turbo link # 在仓库根目录将该项目关联到远程缓存完成登录后turbo build命中的缓存可以直接从远端拉取产物跨机器、跨 CI 流水线复用。该能力对build这类声明了outputs的任务收益最直接//#fix等禁用缓存的任务不受影响。6. 小结这套示例传递的工程实践质量工具选型可插拔Turborepo 模板并不绑定 ESLint。把 biome.jsonc 的预设换成 Ultracite 的core/react/next三件套再配合一条根级任务就能让整个 Monorepo 切换到基于 Biome 的高速 lint/format 体系根任务承载单仓工具//#check、//#fix这类//#前缀根任务是配置在根目录、扫描全仓库的工具Ultracite/Biome、Prettier 等在turbo.json中的标准落法写操作型任务fix记得cache: false配置分层的可复制性repo/typescript-config的三级继承base/nextjs/react-library与workspace:*引用方式可以直接套用到你自己的 Monorepo。相关延伸阅读仓库内其他示例与文档with-biome 示例 展示了任务下沉式 lint 编排with-otel 示例 展示了遥测集成根目录 README.md 与apps/docs/content/docs/下的官方文档覆盖 Tasks、Caching、Remote Caching、Filtering、Configuration Options 与 CLI 等主题。【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址: https://gitcode.com/gh_mirrors/tu/turbo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Turborepo 搭配 Ultracite：用 Biome 预设统一 Monorepo 的 Lint 与格式化（with-ultracite 示例详解）
Turborepo 搭配 Ultracite用 Biome 预设统一 Monorepo 的 Lint 与格式化with-ultracite 示例详解【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址: https://gitcode.com/gh_mirrors/tu/turbo本文以 Turborepo 官方示例仓库 examples/with-ultracite/README.md 为主体完整讲解这套 Turborepo Ultracite 示例的搭建方式、目录结构、turbo.json任务编排与 Biome/Ultracite 配置细节。读完你可以直接复现该 Monorepo创建两个共享组件库的 Next.js 应用用 Ultracite 一条命令完成全仓 lint 与格式修复并用 Turborepo 的任务依赖、缓存与远程缓存机制把这套流程串成可协作的工程链路。1. 示例定位这套示例是什么with-ultracite是 Turborepo 仓库中的一个社区维护示例其元数据 meta.json 给出了官方描述Basic monorepo example with two Next.js applications and integrated Ultracite configurationmaintainedByCoreTeam: false即由社区维护它的核心特征是在标准的 Turborepo Monorepo 骨架上把代码质量工具从 ESLint 体系换成了 Ultracite。Ultracite 是一个基于 Biome 能力的 lint/format 解决方案提供了core、react、next等开箱即用的预设。该示例展示了如何把这种单仓统一配置的质量工具与 Turborepo 的任务系统tasks、缓存、过滤、远程缓存结合起来。1.1 获取方式按照 README 说明使用create-turbo脚手架即可拉取该示例npx create-turbolatest -e with-ultracite1.2 版本前提当前仓库中该示例的根 package.json 声明了明确的运行环境前提复现或升级时需要注意packageManager:pnpm11.22.0依赖workspace:*协议必须用 pnpmengines.node:24关键 devDependenciesturbo2.10.11、ultracite7.10.5、biomejs/biome2.5.9、typescript7.0.22. 仓库结构Apps 与 Packages该 Turborepo 包含以下应用和包与 README 的 Whats inside? 一节一致名称类型说明docsNext.js 应用运行在 3001 端口的文档站应用webNext.js 应用运行在 3000 端口的业务应用repo/uiReact 组件库被web与docs两个应用共享repo/typescript-config配置包提供全仓共用的tsconfig.json基础配置工作区划分由 pnpm-workspace.yaml 定义packages: - apps/* - packages/*每个包都是 100% TypeScript。两个应用通过workspace:*协议引用共享库与配置包见 apps/web/package.jsondependencies: { repo/ui: workspace:*, next: 16.3.1, react: 19.2.8, react-dom: 19.2.8 }, devDependencies: { repo/typescript-config: workspace:*, typescript: 7.0.2 }repo/ui是一个 stub 组件库其 package.json 通过exports直接暴露源码供 Next.js 侧编译transpilename: repo/ui, exports: { ./*: ./src/*.tsx }源码包含Button、Card、Code三个组件例如 button.tsx 是一个带appName属性、点击时打印日志的按钮组件——这正是 Ultracite 规则需要检查的典型 React 代码如useCallback依赖、typebutton属性等。2.1 TypeScript 配置的继承链repo/typescript-config提供三层配置全部以继承 覆盖方式组织base.json全仓基础配置开启strict、noUncheckedIndexedAccess、isolatedModules模块体系为NodeNexttarget/lib为ES2022nextjs.jsonextends: ./base.json改为module: ESNextmoduleResolution: Bundler、jsx: preserve、noEmit: true并注册 Next.js 的 TS 插件react-library.jsonextends: ./base.json仅追加jsx: react-jsx供repo/ui这类纯 React 库使用。两个应用的tsconfig.json如 apps/web/tsconfig.json再继承nextjs.json并额外开启strictNullChecks、把.next/types/**/*.ts纳入检查范围。这条base → nextjs → 应用级的三级继承链是 Turborepo 模板中共享类型配置的标准做法。3. Ultracite 配置biome.jsonc 如何接入预设整个示例的 Ultracite 配置只有一个文件——根目录的 biome.jsonc{ $schema: https://biomejs.dev/schemas/2.5.9/schema.json, extends: [ ultracite/biome/core, ultracite/biome/react, ultracite/biome/next ], files: { // Static assets served by Next.js are not source code. includes: [!**/public] } }配置要点拆解预设叠加extends 链ultracite/biome/core提供通用 JS/TS 规则与格式化器配置ultracite/biome/react叠加 React 生态规则ultracite/biome/next再叠加 Next.js 专属规则。三个预设按序合并后加载的覆盖先加载的同名项——这是 Ultracite 分层预设设计的关键项目侧只需声明用了哪些栈不需要手写几十条 Biome 规则。文件范围裁剪files.includes[!**/public]用 Biome 的 glob 语法排除了两个 Next.js 应用的public/目录——那里放的是turborepo-dark.svg、next.svg等静态资源不是源码不应参与 lint。这一条负向 glob 是接入 Ultracite 时最实用的本地化调整之一。JSONC 格式文件名是.jsonc配置内可以写注释如上Biome 原生支持这种带注释的配置格式。schema 校验$schema指向 Biome 2.5.9 的官方 schema与根package.json中锁定的biomejs/biome2.5.9版本对应编辑器可获得补全与校验。从配置结构看Ultracite 在这里完全复用了 Biome 的配置入口biome.jsonc差异在于规则来源是 Ultracite 发布的预设而非手写——这使团队可以把规则演进交给 Ultracite 的版本升级而本地文件保持极简。4. turbo.json任务编排中的 Ultracite 集成根 turbo.json 是本文最值得逐行看的部分它展示了 Ultracite 如何嵌入 Turborepo 任务系统{ $schema: https://turborepo.dev/schema.json, ui: tui, tasks: { build: { dependsOn: [^build], inputs: [$TURBO_DEFAULT$, .env*], outputs: [.next/**, !.next/cache/**, !.next/dev/**] }, //#check: {}, //#fix: { cache: false }, check-types: { dependsOn: [^check-types] }, dev: { cache: false, persistent: true } } }4.1 根级任务Root/Global Task//#check与//#fix//#check与//#fix使用了 Turborepo 的根任务命名约定//#前缀在 docs/crafting-your-repository/configuring-tasks 中有对应文档。这类任务只在仓库根目录定义、不分布到各工作区典型用途正是 Ultracite 这类单仓统一配置的 lint 工具——Biome 本身就在根目录读biome.jsonc扫全仓没有必要在每个包里重复注册任务。这与根 package.json 中的脚本一一对应scripts: { build: turbo run build, check: ultracite check, fix: ultracite fix, check-types: turbo run check-types, dev: turbo run dev }也就是说 README 中给出的两条命令pnpm check # ultracite check检查全仓 lint 与格式问题 pnpm fix # ultracite fix自动修复实际执行的是 Ultracite CLI底层为 Biome 引擎而非turbo run check。根任务注册的作用在于让 Turborepo 认识这些任务你可以用turbo run check触发它并纳入turbo run all之类的批量执行。4.2//#fix为什么cache: false//#fix显式关闭了缓存。这是合理的fix是修改源文件的写操作其输出不可安全地缓存复用而//#check只读保留默认缓存即可。作为对照with-biome 示例 的写法是把lint任务下沉到每个工作区lint: { dependsOn: [^lint] }由各包自己的lint脚本执行而 with-ultracite 选择了根级单点执行因为 Ultracite 的配置模型是单仓单配置文件两种模式各有适用场景。4.3 其余任务与标准 Turborepo 模板一致builddependsOn: [^build]保证先构建上游依赖包如repo/uiinputs在默认输入之外额外加入.env*outputs声明.next/**为产物并排除缓存目录用于增量缓存判断check-typesdependsOn: [^check-types]逐包执行tsc --noEmit应用侧还先跑next typegen生成类型devpersistent: true, cache: false两个next dev常驻进程分别占用 3000/3001 端口对应 apps/web/package.json 与 apps/docs/package.json 的dev脚本。5. 日常使用流程build / dev / check / fix / 远程缓存5.1 构建与开发cd my-turborepo turbo build # 按依赖图构建所有 apps 与 packages turbo dev # 并行启动 web(:3000) 与 docs(:3001)5.2 Lint 与格式化pnpm check # 只检查不改动文件适合 CI pnpm fix # 自动修复可修复项含格式化由于 Ultracite 配置位于根目录、扫描范围覆盖apps/*与packages/*下的全部 TS/TSX 源码排除public/静态资源一次pnpm check即可覆盖web、docs、repo/ui三包若需要同时做类型检查再叠加pnpm check-types走turbo run check-types按^check-types依赖序在各包内执行。5.3 远程缓存Remote CachingREADME 还介绍了 Turborepo 的远程缓存能力默认情况下 Turborepo 只做本地缓存登录 Vercel 账号后可以为团队与 CI/CD 共享构建缓存。操作步骤cd my-turborepo turbo login # 用 Vercel 账号认证 Turborepo CLI turbo link # 在仓库根目录将该项目关联到远程缓存完成登录后turbo build命中的缓存可以直接从远端拉取产物跨机器、跨 CI 流水线复用。该能力对build这类声明了outputs的任务收益最直接//#fix等禁用缓存的任务不受影响。6. 小结这套示例传递的工程实践质量工具选型可插拔Turborepo 模板并不绑定 ESLint。把 biome.jsonc 的预设换成 Ultracite 的core/react/next三件套再配合一条根级任务就能让整个 Monorepo 切换到基于 Biome 的高速 lint/format 体系根任务承载单仓工具//#check、//#fix这类//#前缀根任务是配置在根目录、扫描全仓库的工具Ultracite/Biome、Prettier 等在turbo.json中的标准落法写操作型任务fix记得cache: false配置分层的可复制性repo/typescript-config的三级继承base/nextjs/react-library与workspace:*引用方式可以直接套用到你自己的 Monorepo。相关延伸阅读仓库内其他示例与文档with-biome 示例 展示了任务下沉式 lint 编排with-otel 示例 展示了遥测集成根目录 README.md 与apps/docs/content/docs/下的官方文档覆盖 Tasks、Caching、Remote Caching、Filtering、Configuration Options 与 CLI 等主题。【免费下载链接】turboBuild system optimized for JavaScript and TypeScript, written in Rust项目地址: https://gitcode.com/gh_mirrors/tu/turbo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考