VUP

English

简体中文

English

简体中文

Appearance

Git Hooks Management ​

Husky is a tool for managing Git hooks that can automatically execute scripts at different stages of Git operations, ensuring code quality and team collaboration standards. This guide details how to use Husky in VUP projects.

What is Husky ​

Husky is a Git hooks management tool that provides:

  • Git Hooks Management - Unified management of all Git hooks
  • Team Collaboration - Ensure team members use the same code standards
  • Automated Checks - Automatically run code checks before commits
  • Flexible Configuration - Support for multiple scripts and tools
  • Easy Maintenance - Simple configuration and management

Quick Start ​

VUP project has Husky pre-configured and ready to use:

1. View Existing Configuration ​

bash
# View .husky directory
ls .husky/

# View existing hooks
cat .husky/pre-commit
cat .husky/pre-push

2. Enable Git Hooks ​

bash
# Add pre-commit hook
echo "pnpm lint-staged" > .husky/pre-commit

# Add pre-push hook
echo "pnpm test" > .husky/pre-push

3. Install Dependencies ​

bash
# Install lint-staged
pnpm add -D lint-staged

# Install related tools
pnpm add -D eslint prettier

Supported Git Hooks ​

pre-commit ​

Executed before commit, used for code checks:

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

# Run lint-staged
pnpm lint-staged

pre-push ​

Executed before push, used for running tests:

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

# Run tests
pnpm test

commit-msg ​

Executed during commit message validation:

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

# Validate commit message format
npx commitlint --edit $1

post-commit ​

Executed after commit:

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

# Post-commit notification
echo "Commit successful!"

Project Configuration ​

package.json Configuration ​

json
{
  "scripts": {
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,tsx,vue}": ["eslint --fix", "prettier --write"],
    "*.{json,md}": ["prettier --write"]
  }
}

.husky Directory Structure ​

.husky/
├── _/
│   └── husky.sh
├── pre-commit
├── pre-push
├── commit-msg
└── post-commit

Common Configurations ​

Code Formatting ​

bash
# pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Run ESLint and Prettier
pnpm lint-staged

Test Checks ​

bash
# pre-push
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Run tests
pnpm test

# Run type checking
pnpm type-check

Commit Message Validation ​

bash
# commit-msg
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Validate commit message format
npx commitlint --edit $1

Build Checks ​

bash
# pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Check build
pnpm build

Advanced Configuration ​

Conditional Execution ​

bash
# pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Only run when specific files change
if git diff --cached --name-only | grep -q "src/"; then
  pnpm lint-staged
fi

Multi-environment Support ​

bash
# pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Execute different commands based on environment
if [ "$NODE_ENV" = "development" ]; then
  pnpm lint-staged
else
  pnpm lint-staged --strict
fi

Error Handling ​

bash
# pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Run command and handle errors
if ! pnpm lint-staged; then
  echo "Code check failed, please fix before committing"
  exit 1
fi

Team Collaboration ​

Installation Configuration ​

bash
# Install hooks after cloning project
pnpm install

# Manually install hooks
pnpm husky install

Configuration Sync ​

bash
# Commit hooks configuration
git add .husky/
git commit -m "chore: add husky hooks"

# Push to remote repository
git push origin main

New Member Onboarding ​

bash
# New member clones project
git clone <repository-url>
cd project

# Install dependencies and hooks
pnpm install
pnpm husky install

Best Practices ​

1. Choose Appropriate Hooks ​

  • pre-commit: Code formatting and basic checks
  • pre-push: Run tests and type checking
  • commit-msg: Validate commit message format
  • post-commit: Post-commit notifications or cleanup

2. Performance Optimization ​

  • Only check changed files
  • Use caching mechanisms
  • Avoid running time-consuming operations

3. Error Handling ​

  • Provide clear error messages
  • Support options to skip hooks
  • Record detailed logs

4. Team Standards ​

  • Unify hooks configuration
  • Document usage instructions
  • Update and maintain regularly

Common Issues ​

Issue 1: Hooks Not Executing ​

Cause: Husky not properly installed or configured

Solution:

bash
# Reinstall Husky
pnpm remove husky
pnpm add -D husky
pnpm husky install

# Check hooks permissions
chmod +x .husky/pre-commit

Issue 2: Permission Errors ​

Cause: Hook files don't have execute permissions

Solution:

bash
# Add execute permissions
chmod +x .husky/*

# Or use Git configuration
git config core.hooksPath .husky

Issue 3: Command Not Found ​

Cause: Environment variable or path issues

Solution:

bash
# Use full path
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Use pnpm to execute
pnpm exec eslint --fix

Issue 4: Skip Hooks ​

Cause: Need to temporarily skip checks

Solution:

bash
# Skip pre-commit
git commit --no-verify -m "Emergency fix"

# Skip pre-push
git push --no-verify

lint-staged ​

Run linters only on staged files:

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

commitlint ​

Validate commit message format:

json
{
  "commitlint": {
    "extends": ["@commitlint/config-conventional"]
  }
}

pretty-quick ​

Quickly format code:

bash
# Format staged files
npx pretty-quick --staged

Copyright © 2025 VUP-CLI