React 18 + Vite 5 + TypeScript 开发环境模板

一个开箱即用的现代化前端开发环境模板，集成了完整的代码规范工具链

快速开始 • 功能特性 • 开发指南 • 配置说明

✨ 功能特性

🚀 现代化技术栈

• React 18 - 最新的 React 版本，支持并发特性
• Vite 5 - 极速的构建工具，提供优秀的开发体验
• TypeScript - 类型安全的 JavaScript 超集
• React Router - 声明式路由管理

🛠️ 完整的开发工具链

• ESLint - 代码质量检测和语法规范
• Prettier - 自动代码格式化
• Stylelint - CSS/SCSS 代码规范检测
• EditorConfig - 统一编辑器配置

🔧 Git 工作流优化

• Husky - Git hooks 管理
• lint-staged - 暂存区文件检测
• Commitlint - 提交信息规范检测
• Commitizen - 交互式提交信息生成

📦 开箱即用

• 预配置的开发环境
• 统一的代码风格
• 自动化的代码检测
• 标准化的提交流程

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• pnpm >= 7.0.0 (推荐) 或 npm/yarn

安装依赖

# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install

启动开发服务器

pnpm dev

访问 http://localhost:5174 查看应用

构建生产版本

pnpm build

预览生产构建

pnpm preview

📋 可用脚本

命令	描述
pnpm dev	启动开发服务器
pnpm build	构建生产版本
pnpm preview	预览生产构建
pnpm eslint	运行 ESLint 检查
pnpm pre-check	运行类型检查和代码检查

🛠️ 开发指南

代码提交规范

本项目使用 Conventional Commits 规范：

# 使用 Commitizen 交互式提交
git cz

# 或手动提交（需遵循规范）
git commit -m "feat: 添加新功能"

提交类型

• feat: 新功能
• fix: 修复 bug
• docs: 文档更新
• style: 代码格式调整
• refactor: 代码重构
• perf: 性能优化
• test: 测试相关
• chore: 构建工具或依赖更新
• revert: 回退提交
• build: 构建相关

代码风格

项目已配置 Prettier 和 ESLint，保存文件时会自动格式化代码。主要规则：

• 使用 2 个空格缩进
• 使用单引号
• 不使用分号
• 行宽限制 100 字符
• 对象和数组末尾不添加逗号

VS Code 推荐插件

• ESLint
• Prettier - Code formatter
• EditorConfig for VS Code
• TypeScript Importer

⚙️ 配置说明

项目结构

├── src/                    # 源代码目录
│   ├── App.tsx            # 主应用组件
│   ├── main.tsx           # 应用入口
│   └── ...
├── .husky/                # Git hooks 配置
├── .vscode/               # VS Code 配置
├── dist/                  # 构建输出目录
├── .editorconfig          # 编辑器配置
├── .eslintrc.js           # ESLint 配置
├── .prettierrc.js         # Prettier 配置
├── .stylelintrc.js        # Stylelint 配置
├── commitlint.config.js   # Commitlint 配置
├── tsconfig.json          # TypeScript 配置
├── vite.config.mts        # Vite 配置
└── package.json           # 项目配置

核心配置文件

• vite.config.mts: Vite 构建配置
• tsconfig.json: TypeScript 编译配置
• .eslintrc.js: ESLint 代码检查规则
• .prettierrc.js: Prettier 代码格式化规则
• commitlint.config.js: Git 提交信息规范

工具链详解

ESLint 配置

项目使用 ESLint 进行代码质量检测，配置包括：

• React 18 JSX 运行时支持
• TypeScript 语法检测
• React Hooks 规则检测
• 自动检测 React 版本

Prettier 配置

自动代码格式化规则：

• 行宽：100 字符
• 缩进：2 个空格
• 引号：单引号
• 分号：不使用
• 尾随逗号：不添加

Husky + lint-staged

Git 提交时自动执行：

• TypeScript 类型检查
• ESLint 代码检查
• 只检查暂存区文件，提高效率

Commitlint

强制使用规范的提交信息格式：

• 支持 Conventional Commits 规范
• 自动验证提交信息格式
• 配合 Commitizen 提供交互式提交

🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'feat: 添加某个功能')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

---

⬆ 回到顶部

Made with ❤️ by IT-NuanxinPro