Git Hooks: Setting Up Pre-Commit Checks That Don't Slow You Down

The Pre-Commit Conundrum

We've all been there - you're in the zone, coding away, and then you hit commit only to realize you've introduced a formatting issue or a linting error. It's frustrating, and it slows you down. But what if you could catch those mistakes before they even make it to your commit history?

Table of Contents

• What are Git Hooks and Why Do We Need Them?
• Setting Up a Pre-Commit Hook with Husky
• Using Lint-Staged for Targeted Formatting
• Running Hooks in Parallel for Speed
• Advanced Use Cases: JSON, SQL, and CSS Formatting
• Best Practices for Implementing Git Hooks

What are Git Hooks and Why Do We Need Them?

Git hooks are scripts that run at specific points during the Git workflow. They can be used to enforce coding standards, run tests, and even modify the commit message. In this article, we'll focus on pre-commit hooks, which run before the commit is created. We recommend using pre-commit hooks to catch errors and formatting issues before they make it to your commit history.

Setting Up a Pre-Commit Hook with Husky

Husky is a popular tool for managing Git hooks. It makes it easy to set up and manage hooks for your project. To get started, install Husky using npm or yarn:

npm install husky --save-dev

Then, add a pre-commit script to your package.json file:

"scripts": {
  "pre-commit": "lint-staged"
}

This will run the lint-staged command before each commit.

Using Lint-Staged for Targeted Formatting

Lint-Staged is a tool that runs linters and formatters against staged Git files. It's a great way to ensure that your code is formatted consistently without slowing down your development workflow. To use Lint-Staged, install it using npm or yarn:

npm install lint-staged --save-dev

Then, add a lint-staged configuration to your package.json file:

"lint-staged": {
  "*.js": ["eslint --fix", "git add"],
  "*.css": ["stylelint --fix", "git add"]
}

This configuration will run ESLint against JavaScript files and Stylelint against CSS files, fixing any formatting issues and adding the changes to the staging area.

Running Hooks in Parallel for Speed

One of the biggest concerns with using pre-commit hooks is that they can slow down your development workflow. However, many hooks can be run in parallel, which can significantly speed up the process. We recommend using the pre-commit framework to run your hooks in parallel. To get started, install the pre-commit framework using npm or yarn:

npm install @pre-commit/cli --save-dev

Then, add a pre-commit configuration to your package.json file:

"pre-commit": ["lint-staged", "jsonlint", "sqlint"]

This configuration will run the lint-staged, jsonlint, and sqlint commands in parallel.

Advanced Use Cases: JSON, SQL, and CSS Formatting

In addition to running linters and formatters, you can also use pre-commit hooks to format specific types of files. For example, you can use the jsonlint command to format JSON files:

"lint-staged": {
  "*.json": ["jsonlint --fix", "git add"]
}

Similarly, you can use the sqlint command to format SQL files:

"lint-staged": {
  "*.sql": ["sqlint --fix", "git add"]
}

And you can use the stylelint command to format CSS files:

"lint-staged": {
  "*.css": ["stylelint --fix", "git add"]
}

Best Practices for Implementing Git Hooks

• Keep your hooks fast and focused on a specific task.
• Use the pre-commit framework to run your hooks in parallel.
• Use Lint-Staged to target specific files and formats.
• Test your hooks thoroughly to ensure they're working as expected.

Key Takeaways

• Use pre-commit hooks to catch errors and formatting issues before they make it to your commit history.
• Use Husky to manage your Git hooks.
• Use Lint-Staged to target specific files and formats.
• Run your hooks in parallel using the pre-commit framework.

FAQ

Q: What is the difference between a pre-commit hook and a pre-push hook?

A: A pre-commit hook runs before the commit is created, while a pre-push hook runs before the commit is pushed to the remote repository.

Q: Can I use pre-commit hooks with other version control systems?

A: No, pre-commit hooks are specific to Git.

Q: How do I debug my pre-commit hooks?

A: You can use the --verbose flag to run your hooks in verbose mode, which will output more detailed information about what's happening during the hook execution.