项目管理方法

前端项目的代码规范、版本控制、协作流程等管理实践

问题

平时如何管理你的项目?

解答

代码规范

使用 ESLint + Prettier 统一代码风格:

// .eslintrc.json
{
  "extends": ["eslint:recommended", "prettier"],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error"
  }
}
// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

配合 husky + lint-staged 在提交前自动检查:

// package.json
{
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"]
  }
}

Git 分支管理

采用 Git Flow 或简化版分支策略:

main        # 生产环境
├── develop # 开发环境
    ├── feature/xxx  # 功能分支
    ├── fix/xxx      # 修复分支
    └── release/xxx  # 发布分支

提交规范

使用 Conventional Commits 规范:

feat: 新增用户登录功能
fix: 修复列表分页问题
docs: 更新 README
refactor: 重构请求模块
chore: 更新依赖版本

配合 commitlint 强制校验:

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional']
}

文档管理

docs/
├── README.md          # 项目说明
├── CHANGELOG.md       # 更新日志
├── CONTRIBUTING.md    # 贡献指南
└── api/               # 接口文档

任务与进度

  • 使用 Jira / Trello / GitHub Projects 管理任务
  • 每个任务对应一个分支
  • PR 关联 Issue,合并后自动关闭

自动化流程

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci
      - run: npm run lint
      - run: npm run test
      - run: npm run build

Code Review

  • PR 必须至少一人审核通过
  • 使用 PR 模板规范描述
  • 关注代码质量、性能、安全

关键点

  • 代码规范:ESLint + Prettier + husky 自动化检查
  • 分支策略:Git Flow,功能分支开发,PR 合并
  • 提交规范:Conventional Commits + commitlint
  • 文档完善:README、CHANGELOG、接口文档
  • CI/CD:自动化测试、构建、部署