配置快速参考

🚀 快速开始

1. 安装依赖

# 安装项目依赖
pnpm install

# 安装代码质量工具（首次）
pnpm add -D eslint prettier eslint-plugin-vue husky lint-staged @vue/eslint-config-prettier

# 初始化 Git Hooks
bash scripts/setup-husky.sh

2. 日常开发

# 启动开发服务器
pnpm dev:weapp

# 代码检查与格式化
pnpm lint           # ESLint 检查并修复
pnpm format         # Prettier 格式化

# 提交代码（自动检查）
git add .
git commit -m "feat: 添加新功能"

📁 配置文件说明

项目配置

文件	用途
.eslintrc.js	ESLint 规则配置
.prettierrc	Prettier 格式化配置
.editorconfig	编辑器统一配置
.lintstagedrc.js	Git 暂存文件检查配置
.husky/pre-commit	Git 提交前钩子

全局配置（~/.claude/rules/）

文件	用途
taro-patterns.md	Taro 开发规范
miniprogram-checklist.md	小程序检查清单
taro-cross-platform.md	多端兼容指南
vue-patterns.md	Vue 3 最佳实践
frontend-testing.md	前端测试指南
code-review.md	代码审查清单
tailwindcss-guide.md	TailwindCSS 使用规范
frontend-performance.md	前端性能优化

🎯 常用命令

开发命令

pnpm dev:weapp      # 微信小程序开发模式
pnpm dev:h5         # H5 端开发模式
pnpm build:weapp    # 微信小程序构建
pnpm build:h5       # H5 端构建

代码质量命令

pnpm lint           # ESLint 检查并修复
pnpm lint:no-fix    # ESLint 仅检查
pnpm format         # Prettier 格式化
pnpm format:check   # Prettier 检查

Git 命令

git add .                    # 添加所有文件
git commit -m "feat: xxx"    # 提交（自动运行检查）
git commit --no-verify -m "xxx"  # 跳过检查（不推荐）

📝 Commit 规范

推荐使用 Conventional Commits 格式：

feat: 新功能
fix: 修复 bug
docs: 文档更新
style: 代码格式
refactor: 重构
test: 测试相关
chore: 构建过程或辅助工具

示例

git commit -m "feat(booking): 添加预约日期选择功能"
git commit -m "fix(auth): 修复登录时 token 未持久化的问题"
git commit -m "docs: 更新开发文档"

⚙️ VS Code 配置

推荐插件

# 安装推荐插件
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension EditorConfig.EditorConfig
code --install-extension Vue.volar
code --install-extension taro.vscode-tarojs

工作区配置

创建 .vscode/settings.json：

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true
}

🔍 常见问题

Q: Husky 钩子不生效？

# 重新初始化 Husky
npx husky install
npx husky add .husky/pre-commit "pnpm lint-staged"
chmod +x .husky/pre-commit

Q: ESLint 和 Prettier 冲突？

# 安装 @vue/eslint-config-prettier
pnpm add -D @vue/eslint-config-prettier

# 在 .eslintrc.js 的 extends 最后添加
'@vue/eslint-config-prettier'

Q: 想跳过检查临时提交？

# ⚠️ 不推荐，仅用于紧急情况
git commit --no-verify -m "feat: 临时提交"

📋 代码审查清单

提交代码前检查：

• 代码已通过 pnpm lint
• 代码已通过 pnpm format
• 无 console.log 或 debugger
• 无注释掉的代码
• 代码有必要的注释
• 功能测试通过
• 文档已更新（如需要）

🎨 代码风格

Vue 组件

<script setup>
// 1. 导入
import { ref, computed } from 'vue'

// 2. Props/Emits
const props = defineProps({})
const emit = defineEmits({})

// 3. 响应式状态
const count = ref(0)

// 4. Computed
const double = computed(() => count.value * 2)

// 5. 方法
const increment = () => { count.value++ }

// 6. 生命周期
onMounted(() => { init() })

// 7. Watch
watch(count, (val) => { track(val) })
</script>

命名规范

// 组件：PascalCase
UserCard.vue
BookingList.vue

// 函数/变量：camelCase
getUserInfo
handleSubmit

// 常量：UPPER_SNAKE_CASE
API_BASE_URL
MAX_RETRY_COUNT

// 文件夹：kebab-case
use-offline-booking.js
auth-redirect.js

🔐 安全检查

提交前确认：

• 无硬编码密钥/Token
• 用户输入已验证
• API 错误信息不泄露敏感数据
• XSS 防护（避免 v-html 或净化）
• 敏感数据不存储在 localStorage

🚀 性能检查

部署前确认：

• 主包体积 < 2MB
• 单个分包 < 2MB
• 首屏渲染 < 2s
• 图片已优化（CDN 参数）
• 长列表使用虚拟滚动
• 路由懒加载已配置

📚 参考资源

• 完整开发指南
• 项目 CLAUDE.md
• Taro 官方文档
• Vue 3 官方文档
• NutUI 官方文档

🎯 下一步

1. ✅ 安装依赖并初始化 Husky
2. ✅ 配置 VS Code
3. ✅ 运行 pnpm dev:weapp 启动开发
4. ✅ 开始编码，享受自动代码检查
5. ✅ 查看全局配置了解最佳实践

祝开发愉快！🎉