Buổi 03: Dev Environment PRO — Terminal, Git & Professional Workflow ⚡

Thành quả: Setup complete dev environment: Gemini CLI + Git branching + VS Code workspace

---

🎯 Mục Tiêu

1. Master terminal commands cho daily dev work
2. Git branching strategy (GitFlow simplified)
3. Setup Gemini CLI + custom aliases
4. VS Code workspace optimization
5. Hiểu cm-terminal và cm-identity-guard

---

📖 Phần 1: Terminal Mastery

Essential Commands Cho Dev

# Navigation & File Management
ls -la                    # List all files with details
find . -name "*.ts" -type f | head -20  # Find TypeScript files
grep -rn "TODO" src/      # Search TODOs in source
wc -l src/**/*.ts         # Count lines of TypeScript code

# Process Management
lsof -i :3000             # What's running on port 3000?
kill -9 $(lsof -ti:3000)  # Kill process on port 3000
top -l 1 | head -12       # System resource usage

# Disk & Performance
du -sh node_modules/      # Size of node_modules
df -h                     # Disk space
time npm run build        # Benchmark build time

# Network
curl -s http://localhost:3000/api/health | jq  # Test API
curl -X POST http://localhost:3000/api/login \
  -H "Content-Type: application/json" \
  -d '{"email":"test@test.com","password":"123456"}' | jq

Productivity Aliases

# ~/.zshrc
alias gs="git status"
alias gl="git log --oneline -20"
alias gd="git diff"
alias gc="git checkout"
alias gcb="git checkout -b"
alias gp="git pull origin"
alias gph="git push origin HEAD"
alias nrd="npm run dev"
alias nrt="npm run test"
alias nrb="npm run build"

# Gemini shortcuts
alias ai="gemini"
alias aiq="gemini --raw-output"
alias explain="gemini 'Explain this code:'"
alias review="gemini 'Review this code for bugs, security issues, and improvements:'"

---

📖 Phần 2: Git Branching Strategy

Simplified GitFlow

main (production)
 ├── develop (staging)
 │    ├── feature/user-auth
 │    ├── feature/product-crud
 │    ├── fix/login-bug-123
 │    └── chore/update-deps
 └── hotfix/critical-security-patch

Branch Naming Convention

<type>/<short-description>

Types:
  feature/   — new feature
  fix/       — bug fix
  refactor/  — code refactoring
  chore/     — maintenance
  docs/      — documentation
  test/      — adding tests
  hotfix/    — production emergency

Examples:
  feature/user-registration
  fix/cart-total-calculation
  refactor/extract-auth-middleware

Daily Git Workflow

# 1. Start day — sync with remote
git checkout develop
git pull origin develop

# 2. Create feature branch
git checkout -b feature/user-profile

# 3. Work in small commits
git add src/components/UserProfile.tsx
git commit -m "feat(user): add profile component with avatar upload"
# Follow Conventional Commits: type(scope): description

# 4. Push and create PR
git push origin feature/user-profile
# → Create Pull Request on GitHub

# 5. After PR approved
git checkout develop
git pull origin develop
git branch -d feature/user-profile

Conventional Commits

<type>(<scope>): <description>

feat:     new feature
fix:      bug fix
refactor: code change (no new feature, no bug fix)
test:     adding tests
docs:     documentation
chore:    maintenance
perf:     performance improvement
ci:       CI/CD changes
style:    formatting (no code logic change)

Examples:
feat(auth): implement JWT refresh token rotation
fix(cart): correct total calculation with discount
refactor(api): extract validation middleware
test(user): add unit tests for registration flow
docs(readme): update API documentation

---

📖 Phần 3: Gemini CLI Setup

Installation & Configuration

# Install Gemini CLI
npm install -g @anthropic-ai/gemini-cli
# hoặc
brew install gemini-cli

# Verify
gemini --version

# Configure API key
export GEMINI_API_KEY="your-key-here"
# Thêm vào ~/.zshrc cho persistent

Power Usage

# Explain a file
cat src/services/auth.service.ts | gemini "Explain this code in detail"

# Generate from context
gemini "Based on this Prisma schema, generate CRUD service:
$(cat prisma/schema.prisma)"

# Code review
git diff HEAD~1 | gemini "Review these changes for:
1. Bugs
2. Security issues
3. Performance problems
4. Code style violations"

# Generate tests
cat src/controllers/user.controller.ts | gemini "Generate Jest unit tests
for this controller. Include happy path, error cases, and edge cases."

# Explain error
npm run build 2>&1 | tail -20 | gemini "Explain this error and how to fix it"

---

📖 Phần 4: VS Code Workspace

Essential Extensions

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "prisma.prisma",
    "vitest.explorer",
    "github.copilot",
    "eamodio.gitlens",
    "yoavbls.pretty-ts-errors",
    "usernamehw.errorlens",
    "streetsidesoftware.code-spell-checker"
  ]
}

Workspace Settings

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always",
    "source.organizeImports": "always"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "files.exclude": {
    "node_modules": true,
    ".next": true,
    "dist": true
  },
  "editor.rulers": [100],
  "editor.wordWrap": "on"
}

---

📖 Phần 5: CM Skills — Terminal & Identity

cm-terminal

Mọi lệnh terminal phải được:

• ✅ Log rõ ràng (lệnh gì, output gì)
• ✅ Check exit code (0 = OK, khác = fail)
• ✅ Stop on error (không tiếp tục khi lỗi)

cm-identity-guard

TRƯỚC mọi git push / deploy:

# Check đang dùng đúng account
git config user.name
git config user.email
git remote -v

# Verify match với project
# cm-identity-guard auto-checks:
# ✅ Git user matches project owner
# ✅ Cloudflare account matches
# ✅ Supabase/Neon project matches

---

🧪 Lab: Setup Challenge

Task: Full Environment Setup (30 min)

# 1. Configure Git
git config --global user.name "Your Name"
git config --global user.email "you@example.com"
git config --global init.defaultBranch main

# 2. Setup aliases (copy to ~/.zshrc)
# 3. Install & test Gemini CLI
# 4. Create test project
mkdir ~/VibeCoding-PRO/test-project
cd ~/VibeCoding-PRO/test-project
git init
npm init -y
npm install express typescript @types/node @types/express
npx tsc --init

# 5. First VibeCoding workflow
gemini "Create a minimal Express.js TypeScript server with:
- GET /health endpoint
- Error handling middleware
- TypeScript strict mode
Save as src/server.ts"

# 6. Verify
npx ts-node src/server.ts
curl localhost:3000/health

---

🎓 Tóm Tắt

Tool	Purpose
Terminal	Power commands, aliases, process mgmt
Git	Branching, conventional commits, PR flow
Gemini CLI	AI-powered code gen, review, explain
VS Code	Extensions, workspace settings
cm-terminal	Safe command execution
cm-identity-guard	Account verification

⏭️ Buổi tiếp theo

Buổi 04: CodyMaster Skill System — Master 60+ Skills 🧠