LogoTanStarter 文档
LogoTanStarter 文档
首页模板介绍代码库快速开始环境配置
网站配置
部署

功能集成

Cloudflare数据库身份验证邮件邮件订阅存储支付通知分析聊天框联盟营销

功能定制

元数据页面落地页博客组件用户管理密钥管理

代码库

项目结构代码检查编辑器设置更新代码库
X (Twitter)

代码检查

在 TanStarter 中使用 Biome 进行代码质量管理

TanStarter 使用 Biome 进行代码格式化和代码检查,以确保项目保持一致的代码质量。

Biome 在项目根目录中通过 biome.json 进行配置,此配置强制执行一致的代码风格并捕获常见错误。

运行代码检查和格式化

检查代码质量

要检查您的代码而不进行更改:

pnpm run lint

此命令将报告代码库中的任何代码检查错误或警告,并尝试自动修复问题。

格式化代码

要自动格式化您的代码:

pnpm run format

此命令将根据项目的代码格式规则格式化所有支持的文件。

自定义规则

项目的 Biome 配置在 biome.json 中定义。以下是我们配置的简化视图:

biome.json
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      // 各种规则自定义...
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "es5",
      "semicolons": "always"
    }
  }
}

有关如何自定义规则配置的更多信息,请参考 Biome 代码检查规则文档。

编辑器集成

Biome 与您的编辑器集成时效果最佳:

  • VSCode/Cursor:安装 Biome 扩展 以获得实时代码检查和格式化
  • 其他编辑器:查看 Biome 文档 了解集成选项

TanStarter 为 Biome 提供了预配置的 VSCode/Cursor 设置,这些设置确保:

  • Biome 用作 JavaScript 和 TypeScript 文件的默认格式化器
  • 保存时自动格式化文件
  • 保存时组织导入语句
.vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

下一步

现在您了解了如何在 TanStarter 中维护代码质量,探索这些相关主题:

项目结构

了解模板项目结构

开发环境

配置开发环境

更新代码库

保持项目代码库与模板同步

环境配置

配置环境变量

项目结构

TanStarter 模板文件和文件夹组织概述

编辑器设置

学习如何设置编辑器以获得 TanStarter 的最佳开发体验

目录

运行代码检查和格式化
检查代码质量
格式化代码
自定义规则
编辑器集成
下一步