Git Hooks and Plugins

Introduction

Git hooks are scripts that run automatically at certain points in Git operations. They enable automation and enforce standards.

Understanding Hooks

Hook Locations

Hooks are stored in .git/hooks/ directory:

.git/hooks/
├── applypatch-msg.sample
├── commit-msg.sample
├── fsmonitor-watchman.sample
├── post-update.sample
├── pre-applypatch.sample
├── pre-commit.sample
├── pre-push.sample
├── pre-rebase.sample
├── pre-receive.sample
└── update.sample

Remove .sample extension to activate.

Client-Side Hooks

Pre-commit Hook

Runs before commit is created. Use for:

• Code linting
• Running tests
• Checking code style
• Finding debugging code

#!/bin/bash
Run linter
npm run lint
Check for console.log
if git diff --cached --grep 'console.log'; then
    echo "Error: console.log found"
    exit 1
fi

Commit-msg Hook

Runs after commit message is entered. Use for:

• Enforcing commit message format
• Checking issue references

#!/bin/bash
COMMIT_MSG=$(cat "$1")
PATTERN="^(feat|fix|docs|style|refactor|test|chore)(\(.+\))?: .{1,50}"
if ! [[ $COMMIT_MSG =~ $PATTERN ]]; then
    echo "Error: Commit message must follow conventional commits"
    echo "Format: type(scope): message"
    exit 1
fi

Pre-push Hook

Runs before push. Use for:

• Running tests
• Checking build
• Linting

#!/bin/bash
Run tests before push
npm test
if [ $? -ne 0 ]; then
    echo "Tests failed. Push aborted."
    exit 1
fi

Server-Side Hooks

Pre-receive Hook

Runs on server before accepting push. Use for:

• Enforcing branch protection
• Blocking certain commits

Update Hook

Similar to pre-receive but runs per branch.

Using Husky

Husky makes Git hooks easy.

Installation

npm install husky --save-dev
npx husky install

Add Hook

npx husky add .husky/pre-commit "npm test"

Creates .husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test

Git Aliases and Extensions

Useful Aliases

Add to .gitconfig:

[alias]
    # Status
    s = status -sb
    
    # Log
    l = log --oneline -20
    lg = log --graph --oneline
    
    # Branch
    b = branch -vv
    
    # Undo last commit
    undo = reset --soft HEAD~1
    
    # Show changes
    changes = diff --name-only
    
    # Cleanup
    cleanup = "!git fetch -p && git branch -vv | grep ': gone]' | awk '{print $1}' | xargs -r git branch -d"

Git Extras

Install additional commands:

# macOS
brew install git-extras
Ubuntu
sudo apt install git-extras

New commands:

• git undo - Undo last commit
• git info - Show repository info
• git authors - Show authors
• git fresh-branch - Delete and recreate branch

Popular Git Tools

GitKraken

Visual Git client for Windows, Mac, Linux.

Features:

• Visual history
• Merge conflict resolution
• Integrated GitHub

SourceTree

Free Git client by Atlassian.

GitHub Desktop

Simple GitHub integration.

VS Code Git Integration

Built-in Git support in Visual Studio Code.

Continuous Integration

GitHub Actions

name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npm test

GitLab CI

stages:
  - test
test:
  stage: test
  script:
    - npm install
    - npm test

IDE Integration

VS Code Extensions

• GitLens - Enhanced Git
• GitHub Pull Requests
• GitGraph
• Prettier - Code formatting
• ESLint - Code linting

IntelliJ / WebStorm

Built-in Git support with visual tools.

Summary

Extend Git with:

• Hooks - Automate tasks at key points
• Husky - Easy hook management
• Aliases - Shortcuts for commands
• External tools - GUI clients
• CI/CD - Automated testing and deployment
• IDE plugins - Integrated experience

Next Lesson

Learn tips and best practices for effective Git usage.