Automatyzacja pracy deweloperskiej z Git hooks i CI/CD

Dowiedz się, jak uporządkować codzienną pracę z Git hooks, CI/CD, VS Code i Husky, aby szybciej wykonywać powtarzalne zadania.

Automatyzacja pracy deweloperskiej pomaga ograniczyć liczbę ręcznych, powtarzalnych czynności. W tym przewodniku pokazuję, jak połączyć Git hooki, CI/CD, zadania VS Code, Husky i inne narzędzia w jeden proces, który da się utrzymać także w większym projekcie.

Integracja z Git hookami

Pre-commit hook: automatyczny linting

Stwórz plik .git/hooks/pre-commit:

#!/bin/bash
# .git/hooks/pre-commit

echo "🔍 Sprawdzam kod przed commitem..."

# Uruchom linting
npm run lint

if [ $? -ne 0 ]; then
  echo "❌ Znaleziono błędy lintingu!"
  echo "Użyj 'git commit --no-verify' aby pominąć sprawdzenie."
  exit 1
fi

# Uruchom testy
npm test

if [ $? -ne 0 ]; then
  echo "❌ Testy nie przeszły!"
  echo "Użyj 'git commit --no-verify' aby pominąć sprawdzenie."
  exit 1
fi

echo "✅ Wszystko OK!"
exit 0

Ustaw uprawnienia:

chmod +x .git/hooks/pre-commit

Pre-push Hook - Sprawdzanie Testów

.git/hooks/pre-push:

#!/bin/bash

echo "🧪 Uruchamiam testy przed push..."

# Uruchom testy
npm test

if [ $? -ne 0 ]; then
  echo "❌ Testy nie przeszły!"
  echo "Napraw testy przed pushem."
  exit 1
fi

# Sprawdź czy branch jest aktualny
git fetch origin

LOCAL=$(git rev-parse @)
REMOTE=$(git rev-parse @{u})

if [ $LOCAL != $REMOTE ]; then
  echo "⚠️  Twój branch nie jest aktualny. Wykonaj git pull."
  exit 1
fi

echo "✅ Wszystkie testy przeszły i branch jest aktualny"
exit 0

Commit Message Template

Zamiast generowania commit messages przez hook, skonfiguruj szablon:

.gitmessage:

# <type>(<scope>): <subject>
#
# <body>
#
# <footer>
#
# Types: feat, fix, docs, style, refactor, test, chore
# Scope: component, feature, or file name
# Subject: imperative, lower case, no period
# Body: explain what and why
# Footer: reference issues, breaking changes

Skonfiguruj szablon globalnie:

git config --global commit.template ~/.gitmessage

Integracja z VS Code

Custom Task dla Claude Code

Utwórz .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Claude: Review Current File",
      "type": "shell",
      "command": "claude",
      "args": [
        "Review ${file} for code quality, bugs, and improvements"
      ],
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Claude: Generate Tests",
      "type": "shell",
      "command": "claude",
      "args": [
        "Generate unit tests for ${file}"
      ],
      "problemMatcher": []
    },
    {
      "label": "Claude: Explain Code",
      "type": "shell",
      "command": "claude",
      "args": [
        "Explain what ${file} does in detail"
      ],
      "problemMatcher": []
    },
    {
      "label": "Claude: Fix ESLint Errors",
      "type": "shell",
      "command": "claude",
      "args": [
        "Fix all ESLint errors in ${workspaceFolder}"
      ],
      "problemMatcher": []
    }
  ]
}

Użycie: Cmd/Ctrl + Shift + P → “Tasks: Run Task” → wybierz task Claude

Keybindings dla Claude

.vscode/keybindings.json:

[
  {
    "key": "ctrl+alt+r",
    "command": "workbench.action.tasks.runTask",
    "args": "Claude: Review Current File"
  },
  {
    "key": "ctrl+alt+t",
    "command": "workbench.action.tasks.runTask",
    "args": "Claude: Generate Tests"
  },
  {
    "key": "ctrl+alt+e",
    "command": "workbench.action.tasks.runTask",
    "args": "Claude: Explain Code"
  }
]

Integracja z CI/CD

GitHub Actions Workflow

.github/workflows/ci.yml:

name: CI Pipeline

on:
  pull_request:
    types: [opened, synchronize]
  push:
    branches: [main, develop]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install Dependencies
        run: npm ci

      - name: Run Linter
        run: npm run lint

      - name: Run Tests
        run: npm test

      - name: Build
        run: npm run build

      - name: Upload Coverage
        uses: codecov/codecov-action@v3
        with:
          files: ./coverage/coverage-final.json

GitLab CI Pipeline

.gitlab-ci.yml:

stages:
  - test
  - build
  - deploy

test:
  stage: test
  image: node:18
  script:
    - npm ci
    - npm run lint
    - npm test
  coverage: '/Lines\s*:\s*(\d+\.\d+)%/'
  artifacts:
    reports:
      coverage_report:
        coverage_format: cobertura
        path: coverage/cobertura-coverage.xml

build:
  stage: build
  image: node:18
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - dist/

Skrypty Automatyzacji

Daily Code Health Check

scripts/daily-health-check.sh:

#!/bin/bash
# Codzienny sprawdzenie zdrowia kodu

PROJECT_DIR="$HOME/projects/my-app"
REPORT_FILE="/tmp/health-report-$(date +%Y-%m-%d).md"

cd "$PROJECT_DIR"

echo "# Code Health Report - $(date +%Y-%m-%d)" > "$REPORT_FILE"
echo "" >> "$REPORT_FILE"

# 1. Security audit
echo "## Security Audit" >> "$REPORT_FILE"
npm audit >> "$REPORT_FILE"
echo "" >> "$REPORT_FILE"

# 2. Test coverage
echo "## Test Coverage" >> "$REPORT_FILE"
npm run test:coverage >> "$REPORT_FILE"
echo "" >> "$REPORT_FILE"

# 3. Lint issues
echo "## Lint Issues" >> "$REPORT_FILE"
npm run lint >> "$REPORT_FILE"
echo "" >> "$REPORT_FILE"

# 4. Build status
echo "## Build Status" >> "$REPORT_FILE"
npm run build && echo "✅ Build successful" >> "$REPORT_FILE" || echo "❌ Build failed" >> "$REPORT_FILE"

# Send report via email
mail -s "Daily Code Health Report" dev-team@company.com < "$REPORT_FILE"

Code Quality Check Script

scripts/quality-check.sh:

#!/bin/bash
# Sprawdź jakość kodu

TARGET_DIR="${1:-src}"

echo "🔍 Analizuję kod w $TARGET_DIR..."

# Uruchom linter
echo "1. Linting..."
npm run lint

# Sprawdź test coverage
echo "2. Test Coverage..."
npm run test:coverage

# Sprawdź security vulnerabilities
echo "3. Security Audit..."
npm audit

# TypeScript type checking
echo "4. Type Checking..."
npm run type-check

echo "✅ Analiza zakończona!"

Package.json Scripts Integration

Dodaj do package.json:

{
  "scripts": {
    "lint": "eslint src/**/*.{js,ts,tsx}",
    "lint:fix": "eslint src/**/*.{js,ts,tsx} --fix",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "test:watch": "jest --watch",
    "type-check": "tsc --noEmit",
    "format": "prettier --write \"src/**/*.{js,ts,tsx,json,css,md}\"",
    "format:check": "prettier --check \"src/**/*.{js,ts,tsx,json,css,md}\"",
    "build": "vite build",
    "dev": "vite",
    "precommit": "npm run lint && npm run type-check && npm test",
    "prepare-release": "conventional-changelog -p angular -i CHANGELOG.md -s"
  }
}

Użycie:

npm run lint:fix     # Napraw błędy lintingu
npm run test:coverage # Sprawdź pokrycie testów
npm run precommit    # Przed commitem
npm run prepare-release # Wygeneruj changelog

Makefile Integration

Makefile:

.PHONY: install lint test build clean dev

install:
	@echo "📦 Instalowanie zależności..."
	@npm ci

lint:
	@echo "🔍 Linting kodu..."
	@npm run lint

lint-fix:
	@echo "🔧 Naprawiam błędy lintingu..."
	@npm run lint:fix

test:
	@echo "🧪 Uruchamiam testy..."
	@npm test

test-coverage:
	@echo "📊 Sprawdzam pokrycie testów..."
	@npm run test:coverage

build:
	@echo "🏗️  Buduję projekt..."
	@npm run build

dev:
	@echo "🚀 Uruchamiam serwer deweloperski..."
	@npm run dev

clean:
	@echo "🧹 Czyszczę pliki build..."
	@rm -rf dist node_modules/.vite

health-check: lint test-coverage build
	@echo "✅ Projekt jest zdrowy!"

Docker Integration dla CI/CD

Dockerfile:

FROM node:18-alpine AS builder

WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy source code
COPY . .

# Build application
RUN npm run build

# Production image
FROM node:18-alpine

WORKDIR /app

# Copy build artifacts
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/package*.json ./

# Install production dependencies only
RUN npm ci --only=production

# Expose port
EXPOSE 3000

# Start application
CMD ["node", "dist/server.js"]

Użycie:

# Build
docker build -t my-app:latest .

# Run
docker run -p 3000:3000 my-app:latest

File Watcher dla Automatycznego Testowania

scripts/watchdog.sh:

#!/bin/bash
# Auto-test na zmiany w plikach

WATCH_DIR="${1:-src}"

echo "👀 Obserwuję zmiany w $WATCH_DIR..."

# Wymaga fswatch: brew install fswatch
fswatch -o "$WATCH_DIR" | while read; do
  echo "🔍 Wykryto zmiany"

  # Uruchom linter
  npm run lint:fix

  # Uruchom testy dla zmienionych plików
  npm test -- --changed

  if [ $? -eq 0 ]; then
    echo "✅ Wszystko działa"
  else
    echo "❌ Testy nie przeszły"
  fi
done

Best Practices dla Integracji

1. Environment Variables

Przechowuj dane dostępowe bezpiecznie:

# .env.local (NIE commituj tego pliku!)
DATABASE_URL=postgresql://user:pass@localhost:5432/db
API_KEY=your_api_key_here
STRIPE_SECRET=sk_test_...

Dodaj .env.local do .gitignore:

# .gitignore
.env.local
.env*.local
*.log
node_modules/
dist/

2. Bash Aliases dla Produktywności

# .bashrc / .zshrc
alias gs="git status"
alias gd="git diff"
alias gc="git commit"
alias gp="git push"
alias gl="git log --oneline --graph --decorate"
alias nr="npm run"
alias nt="npm test"
alias nb="npm run build"

3. Husky dla Git Hooks

Zamiast ręcznego zarządzania hookami, użyj Husky:

# Instalacja
npm install --save-dev husky
npx husky install

# Dodaj pre-commit hook
npx husky add .husky/pre-commit "npm run lint && npm test"

# Dodaj commit-msg hook (do conventional commits)
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

📚 Dokumentacja i Zasoby

Oficjalna Dokumentacja

Powiązane Artykuły

Podsumowanie

Najlepsza automatyzacja to taka, która jest przewidywalna i nie przeszkadza w pracy. Git hooki, CI/CD, zadania VS Code i Husky mają sens wtedy, gdy razem skracają drogę od zmiany w kodzie do pewnego wdrożenia, zamiast dokładać kolejne obowiązki.

W praktyce najlepiej wdrażać to etapami: najpierw linting i podstawowe testy, potem zadania lokalne, a dopiero na końcu bardziej rozbudowane potoki CI/CD. Taka kolejność ułatwia utrzymanie i szybciej pokazuje, które elementy realnie oszczędzają czas.