Vite 构建,React 18 与 TypeScript 组合
vite-reactts18-chakra-jest-husky — Vite 启动器模板
作者 The24thDS
基于 Vite 的 React 18 + TypeScript 启动模板,集成 Chakra UI、Jest、ESLint、Prettier 与 Husky 提交钩子。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
Chakra UI 组件库,附带 Framer Motion
Jest 与 Testing Library 测试配置
ESLint、Prettier 代码检查与格式化
Husky 提交前钩子与 commitlint 提交规范
MIT 许可,可免费使用与修改
模板详细介绍
这是一个用于搭建 React 18 应用的启动模板,构建工具为 Vite,语言为 TypeScript,UI 层使用 Chakra UI 并搭配 Framer Motion。仓库同时配置了 Jest 与 Testing Library 用于测试,ESLint 与 Prettier 负责代码检查与格式化,Husky 提供提交前钩子,commitlint 约束提交信息格式。
模板通过 degit 从仓库拉取代码,初始化 git 后使用 yarn 安装依赖,yarn dev 启动本地开发服务。README 列出了 lint、build、test 等脚本命令,并建议配合 ESLint、Prettier 与 styled-components 的 VS Code 扩展使用。
模板本身不包含业务页面或后端逻辑,属于工程脚手架性质;演示站点仅用于展示默认页面。代码以 MIT 许可发布,可免费使用、修改与分发,但需保留版权与许可声明。
适合你的项目吗?
适用场景
- 快速搭建 React + TypeScript 新项目
- 需要 Chakra UI 作为组件库的前端工程
- 希望开箱带有 Jest 测试与代码检查配置的项目
- 团队要求统一提交信息格式与提交前自动格式化的场景
适合人群
- 使用 React 与 TypeScript 的前端开发者
- 偏好 Vite 而非其他构建工具的项目
- 需要 Chakra UI 组件体系与测试配置的团队
- 接受 yarn 作为包管理器的项目
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
使用 npx degit The24thDS/vite-reactts18-chakra-jest-husky my-app 拉取模板
- 2
进入目录后执行 git init 初始化仓库
- 3
使用 yarn 安装依赖,yarn dev 启动开发服务
- 4
提交信息需符合 conventional-changelog 规范,可用 yarn cz 辅助生成
- 5
演示图片、字体、图标等第三方素材需单独核对许可
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
https://github.com/The24thDS/vite-reactts18-chakra-jest-husky/blob/main/LICENSEhttps://github.com/The24thDS/vite-reactts18-chakra-jest-husky/blob/main/README.mdPermission is hereby granted, free of charge
许可证原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 77 / 100
- 技术栈
- Vite · React
- 网站类型
- 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2023-01-25
- 截图检查日期
- 2026-10-02
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 60744e96c8030a9081a33a02a55e986b02450db461145be3ea232e7649fbd0e9
2026-10-02T22:04:42.595Z
来源文件 / 仓库# ReactTS 18 with Chakra UI and Vite This is a [React](https://reactjs.org) + [TypeScript](https://www.typescriptlang.org/) + [Chakra UI](https://chakra-ui.com) boilerplate to be built with [Vite](https://vitejs.dev). It also includes [Husky](https://typicode.github.io/husk) and a pre-commit hook that runs `yarn format`. ## What's inside? - [ReactJS](https://reactjs.org) - [Vite](https://vitejs.dev) - [TypeScript](https://www.typescriptlang.org) - [Chakra UI](https://chakra-ui.com) - [Framer Motion](https://www.framer.com/motion/) - [Jest](https://jestjs.io) - [Testing Library](https://testing-library.com) - [Eslint](https://eslint.org) - [Prettier](https://prettier.io) - [Husky](https://typicode.github.io/husky) \+ other smaller dependencies ## Getting started 1. Create the project. ```bash npx degit The24thDS/vite-reactts18-chakra-jest-husky my-app ``` 2. Access the project directory. ```bash cd my-app ``` 3. Initialize a git repository. ```bash git init ``` 4. Install dependencies. ```bash yarn ``` 5. Serve with hot reload at http://localhost:5173. ```bash yarn dev ``` ## Recommended VS Code extensions - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components) ## Other commands ### Lint commands - Run eslint ```bash yarn lint ``` - Run eslint with fixing ```bash yarn lint:fix ``` ### Build commands ```bash yarn build ``` ### Test commands - Run tests with coverage (will open the coverage if all tests succeed) ```bash yarn test ``` - Watch tests ```bash yarn test:watch ``` ### Commit commands This project use [commitlint](https://github.com/conventional-changelog/commitlint) to ensure that commit messages are [conventional-changelog](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional) compliants. To help you build more efficient commit messages, you can use the [commitizen](https://github.com/commitizen/cz-cli) package by running this command : ```bash yarn cz ``` ## License This project is licensed under the MIT License.
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

react-starter-kit
Modern React starter kit with Bun, TypeScript, Tailwind CSS, tRPC, Stripe, and Cloudflare Workers. Production-…
Vite · SaaS

cove
The Cove Stack: 🏝️ minimal TanStack Start template with Vite+, Better Auth, Drizzle ORM, shadcn/ui
Vite · SaaS

vite-react-boilerplate
A production ready, scalable starter template for Vite + React
Vite · 启动器

react-vite-admin
This Starter utilizes React, Recoil, React Query, React Hooks, Typescript, Axios And Vite. 全新技术栈的后台管理系统
Vite · 后台

typescript-react_best_practices-vite_template
<⚡⚛️> Start your React project with Vite following code best practices (TypeScript, Linting, testing, CI/CD…)
Vite · 启动器

cloudflare-starter-kit
Template (boilerplate) repository for scaffolding Cloudflare Workers projects
Vite · 启动器
