🛠️ 开发工具：Git / IDE / 调试 / 性能分析

Git 工作流

分支策略

Git 配置最佳实践

# .gitconfig — 基础配置
[user]
  name = Your Name
  email = you@yourapp.com

[init]
  defaultBranch = main

[core]
  editor = code --wait  # 或 vim/nano
  autocrlf = input      # Linux/Mac

# 有用的别名
[alias]
  st = status -sb
  co = checkout
  br = branch
  ci = commit
  lg = log --oneline --graph --decorate -20
  unstage = reset HEAD --
  amend = commit --amend --no-edit
  wip = !git add -A && git commit -m 'WIP'
  undo = !git reset --soft HEAD~1

# .gitignore — SaaS 项目模板
node_modules/
.next/
.env*.local
*.log
dist/
coverage/
.DS_Store
*.swp

Conventional Commits

# 提交消息格式
# <type>(<scope>): <subject>

feat(auth): add OAuth2 Google sign-in
fix(api): handle null user in billing endpoint
docs(readme): update installation instructions
style(ui): fix button alignment on mobile
refactor(db): extract connection pooling logic
test(api): add integration tests for webhook
chore(deps): upgrade Next.js to 15.2

# 自动生成 CHANGELOG
# 使用: commitizen + cz-conventional-changelog
npm install -D commitizen cz-conventional-changelog
# package.json: "config.commitizen.path": "cz-conventional-changelog"
# 使用 git cz 代替 git commit

IDE 与编辑器

编辑器对比

VS Code / Cursor 必装扩展

终端工具

现代终端工具链

# 必装 CLI 工具
# 包管理
brew install eza bat fd ripgrep fzf jq tmux

# zsh 插件（oh-my-zsh）
# ~/.zshrc plugins=(
#   git z sudo zsh-autosuggestions zsh-syntax-highlighting
#   fzf eza copypath copydir dirhistory
# )

# fzf — 模糊搜索（改变你的终端体验）
# Ctrl+T: 搜索文件
# Ctrl+R: 搜索历史
# Alt+C: 跳转目录

# 常用别名
alias ll='eza -la --git --icons'
alias cat='bat --paging=never'
alias find='fd'
alias grep='rg'
alias gs='git st'
alias gl='git lg'

API 开发工具

调试工具

前端调试

后端调试

# Node.js 调试
# 1. VS Code 内置调试器
# launch.json:
{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "name": "Debug API",
    "runtimeExecutable": "npm",
    "runtimeArgs": ["run", "dev"],
    "console": "integratedTerminal"
  }]
}

# 2. Node.js Inspector
node --inspect-brk your-script.js
# 打开 chrome://inspect → 点击 "inspect"

# 3. 条件断点（在 DevTools 或 VS Code 中）
// 右键断点 → "Edit Breakpoint" → 输入条件
// 例: userId === 'abc123'

# 4. 远程调试（生产环境慎用！）
node --inspect=0.0.0.0:9229 your-script.js
# 只在安全网络中使用！

性能分析

前端性能

// 性能测量代码
import { onLCP, onINP, onCLS } from 'web-vitals'

onLCP(metric => {
  analytics.track({ name: 'web_vital_lcp', value: metric.value })
})
onINP(metric => {
  analytics.track({ name: 'web_vital_inp', value: metric.value })
})
onCLS(metric => {
  analytics.track({ name: 'web_vital_cls', value: metric.value })
})

// Next.js 内置性能分析
// next.config.js
module.exports = {
  experimental: {
    webVitalsAttribution: ['CLS', 'LCP', 'INP'],
  },
}

后端性能分析

// Node.js 性能分析
// 1. CPU Profile
node --prof your-app.js
node --prof-process isolate-0x*.log > profile.txt

// 2. Clinic.js — 可视化性能分析
npm install -g clinic
clinic doctor -- node your-app.js
clinic flame -- node your-app.js
clinic bubbleprof -- node your-app.js

// 3. 数据库查询分析
// Prisma: 开启查询日志
const prisma = new PrismaClient({
  log: [
    { level: 'query', emit: 'event' }
  ]
})

prisma.$on('query', (e) => {
  if (e.duration > 100) { // 超过 100ms 的慢查询
    console.warn('Slow query:', e.query, e.duration + 'ms')
  }
})

// PostgreSQL: pg_stat_statements
// 共享库加载 pg_stat_statements
// SELECT query, calls, total_time, mean_time
// FROM pg_stat_statements ORDER BY total_time DESC LIMIT 20;

数据库工具

开发环境

Dev Container / Devbox

// .devcontainer/devcontainer.json — VS Code Dev Container
{
  "name": "YourApp Dev",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
  "features": {
    "ghcr.io/devcontainers/features/postgresql:1": {}
  },
  "forwardPorts": [3000, 5432],
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "prisma.prisma"
      ]
    }
  }
}

// 开发环境一键启动
// docker-compose.dev.yml
version: '3.8'
services:
  app:
    build: .
    ports: ['3000:3000']
    environment:
      DATABASE_URL: postgresql://dev:dev@db:5432/yourapp_dev
    depends_on: [db, redis]

  db:
    image: postgres:16
    environment:
      POSTGRES_USER: dev
      POSTGRES_PASSWORD: dev
      POSTGRES_DB: yourapp_dev
    ports: ['5432:5432']
    volumes: ['pgdata:/var/lib/postgresql/data']

  redis:
    image: redis:7-alpine
    ports: ['6379:6379']

volumes:
  pgdata:

AI 辅助开发

2026 年，AI 编程助手已经不是"可选项"，而是开发工具链的标准配置。

🔗 相关章节