Vue3-CodeStandard-Template

《告别代码"事故现场"！Vite+Vue 3项目规范"铁三角"实战指南》配套标准工程模板

文章地址：https://mp.weixin.qq.com/s/J6HlSPyjlk56dFj5uHan9Q

这是一个基于 Vite 和 Vue 3 的项目模板，集成了代码规范"铁三角"（ESLint、Prettier、StyleLint）和 Git 提交规范工具，全面实现代码质量自动化管理。

特性

• 🛠️ Vite - 极速的前端构建工具
• ⚡️ Vue 3 - 渐进式 JavaScript 框架
• 📏 ESLint - JavaScript 代码质量检查工具
• 💅 Prettier - 代码格式化工具
• 🎨 StyleLint - CSS 代码质量检查工具
• 🐶 Husky - Git 钩子工具
• 🚫 lint-staged - 对暂存的 Git 文件运行 linters
• 📝 CommitLint - Git 提交信息规范检查工具
• 📋 Commitizen - 交互式提交命令行工具

开发环境设置

推荐的 IDE 设置

• VS Code
• 推荐插件 (已在 .vscode/extensions.json 中配置):
  • Volar - Vue 3 官方扩展
  • ESLint
  • Prettier
  • StyleLint

项目设置

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview

代码质量相关命令

# 使用 ESLint 检查并修复 JS/Vue 文件
pnpm lint:script

# 使用 StyleLint 检查并修复样式
pnpm lint:style

# 使用 Prettier 格式化代码
pnpm format

Git 提交规范

本项目强制使用 Conventional Commits 规范来规范化提交信息。通过 Husky 和 CommitLint，确保团队成员遵循统一的提交规范。

提交消息格式:

<类型>[可选的作用域]: <描述>

[可选的正文]

[可选的页脚]

常用的类型:

• feat: 新功能
• fix: Bug 修复
• docs: 文档变更
• style: 代码风格调整（不影响代码逻辑）
• refactor: 代码重构（既不是新增功能，也不是修复 bug）
• perf: 性能优化
• test: 添加或修改测试
• build: 构建相关变更
• ci: CI 配置变更
• chore: 其他不修改 src 或测试的更改
• revert: 回滚提交

示例:

feat(auth): 添加用户登录功能

- 实现用户名密码登录
- 添加记住密码选项
- 集成 JWT 认证

Ref: #123

Git 提交命令

本项目提供了两种规范提交的方式：

1. 使用交互式提交助手（推荐）：

# 添加文件到暂存区
git add .

# 使用交互式提交助手
pnpm commit

这将启动一个交互式的命令行工具，引导你完成规范的提交信息。

2. 手动编写提交信息（需遵循规范）：

git add .
git commit -m "feat: 添加新功能"

无论使用哪种方式，提交前都会自动运行以下检查：

• 使用 ESLint、StyleLint 和 Prettier 检查和修复代码格式
• 验证提交信息是否符合 Conventional Commits 规范

如果检查不通过，提交将被拒绝，你需要修复问题后再次提交。

自动化工作流

通过 Husky 和 lint-staged 配置，本项目在 git commit 时会自动执行:

1. 对暂存的文件进行 ESLint/StyleLint 检查和 Prettier 格式化
2. 验证提交信息格式是否符合 Conventional Commits 规范

这确保了代码质量和风格的一致性，以及提交历史的规范化。

项目维护

为了保持项目的代码质量，建议定期运行以下命令：

# 格式化所有代码
pnpm format

# 检查并修复 JavaScript/Vue 代码
pnpm lint:script

# 检查并修复样式代码
pnpm lint:style

如何使用此模板

1. 克隆仓库：git clone <仓库地址>
2. 安装依赖：pnpm install (会自动安装 Husky 钩子)
3. 运行开发服务器：pnpm dev
4. 按照自己的需求修改代码
5. 使用 pnpm commit 提交代码（确保符合规范）

团队协作指南

为了确保团队协作的顺利进行和代码质量的一致性，所有团队成员应该：

1. 遵循 Conventional Commits 规范进行提交
2. 提交前使用 pnpm lint:script 和 pnpm lint:style 检查代码
3. 优先使用 pnpm commit 命令进行交互式提交
4. 不要使用 --no-verify 跳过提交前检查
5. 定期从主分支拉取最新代码并合并

贡献指南

1. Fork 该仓库
2. 创建你的特性分支 (git checkout -b feature/amazing-feature)
3. 提交你的修改 (pnpm commit 或 git commit -m 'feat: add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 提交 Pull Request

Windows 用户注意事项

如果在 Windows 环境下 Husky 钩子不工作，可以尝试以下解决方案：

1. 确保使用 Git Bash 或 WSL 而不是 CMD/PowerShell
2. 运行 git config --global core.autocrlf false 设置行尾
3. 重新安装钩子：删除 .husky 目录，然后运行 pnpm prepare
4. 如果问题仍然存在，参考 Husky 文档