这个样板是一个完整且专业的项目基础，使用 Astro.js、SolidJS 和 TypeScript 构建，旨在实现高性能、高安全性和高质量的代码。它非常适合需要坚实且可维护架构的复杂大型应用程序。
该项目的核心支柱是可读性、可重用性和可重构性。UI 遵循原子设计方法论，将组件组织成原子、分子、生物体和模板，以获得更好的结构和一致性。
🌐 技术栈
🚀 Astro.js - 快速、现代的静态站点生成器，采用岛屿架构
⚛ React.js - 用于构建用户界面的响应式 JavaScript 库
🔥 TypeScript - 类型化 JavaScript，提升开发体验和代码质量
💅 CSS Modules - 用于组件样式设置的局部作用域 CSS
🚩 代码检查与格式化
- Lefthook - Git Hooks 管理器
- BiomeJS - 快速格式化工具和 Linter
- Commitlint - 代码提交信息规范检查
✅ 测试
- Vitest - 快速单元测试框架
- Playwright - 端到端测试框架
🚩 特性
- 响应式设计 - 针对所有屏幕尺寸的移动优先方法
- 原子设计 - 用于可维护 UI 的结构化组件层次结构
- 无障碍功能 - 检测 prefers-reduced-motion 和其他辅助功能
- 主题 - 使用 CSS Modules 进行主题配置，实现一致的样式
- 开发者体验
- 全局别名，无需手动导入即可引入 clsx 等工具
- 使用 BiomeJS 即时进行代码检查和格式化
- Lefthook 仅对已更改的文件运行 lint
- 性能
- 超优化字体设置，每个字体仅 2KB，支持预加载
- Astro 的部分水合技术可最大限度减少 JavaScript
- 图标 - 可定制的图标系统，支持自定义 SVG 和来自 Iconify 的任何图标
- CI/CD
- 自动发布生成和版本控制
- 预配置的 GitHub Actions 工作流
该项目得到积极维护，并根据架构和开发者体验的最佳实践进行更新。预配置的脚本可以轻松地使用 pnpm 运行开发环境、测试、代码检查、格式化代码以及检查依赖项更新。
通过 Lefthook 强制执行严格的代码检查和测试规则，确保每次提交和推送的代码都是干净且可用于生产的。
这个主题非常适合希望从一个可扩展且结构良好的代码库开始，避免设置开销并专注于更快地构建功能的开发者和团队。
由 Éverton Toffanetto 创建和维护
🔗 领英
🔗 YouTube
