Automate Your Dev Workflow with Husky and Git Hooks

Are manual checks and repetitive tasks slowing you down? If you’re tired of running tests, linting, and formatting manually before every commit, it’s time to automate your dev workflow with Husky and Git Hooks. In this post, we’ll explore how Husky can streamline your workflow, improve code consistency, and ensure every commit meets your coding standards.

---

Why Use Husky to Automate Your Dev Workflow?

Husky is a powerful JavaScript library designed to manage and execute Git hooks efficiently. Git hooks are scripts that run automatically at specific points in the Git lifecycle, such as before staging or committing code. By integrating Husky into your project, you can ensure that essential checks, like running tests and linting code, happen automatically before a commit is made.

This is particularly useful when collaborating with other developers who might not have their IDEs configured with Prettier or ESLint. Instead of manually fixing formatting and linting issues later, you can enforce these checks right from the start.

---

Setting Up Husky in a Node.js Project

Let’s dive into setting up Husky in a Node.js project using Visual Studio Code.

Step 1: Install Husky

To get started, install Husky as a dev dependency:

npm install husky --save-dev

Step 2: Initialize Husky

Next, run the following command to initialize Husky in your project:

npx husky init

This command creates a .husky folder with a default pre-commit hook that runs tests before every commit.

Step 3: Commit to See Husky in Action

Now, stage and commit your code:

git add .
git commit -m "add husky"

You should see Husky running your tests before allowing the commit to proceed.

🚀Boost your career with Full Stack Software Developer Certificate

---

Enhancing Husky with Lint-Staged

While running tests is great, we can further automate the dev workflow with Husky by adding linting and formatting checks using lint-staged.

Step 4: Install Lint-Staged

npm install lint-staged --save-dev

Step 5: Configure Lint-Staged

Open your package.json and add the following configuration:

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

This ensures that ESLint fixes lint errors and Prettier formats only the staged files before committing.

Step 6: Update the Husky Pre-Commit Hook

Navigate to .husky/pre-commit and add the following line before running tests:

npx lint-staged

Now, every time you commit code, linting and formatting will be handled automatically.

---

Testing Husky and Lint-Staged in Action

To see Husky and Lint-Staged working, disable “Format on Save” in your VS Code settings. Then, create a new function in your project with intentional formatting errors.

function helloWorld() {
  console.log('hello world')
}

Now, stage and commit the file:

git add .
git commit -m "test lint-staged"

Husky will run Lint-Staged, fixing the formatting issues before allowing the commit.

---

Conclusion

By integrating Husky and Lint-Staged into your project, you can automate your dev workflow with Husky and eliminate manual checks. This ensures that every commit is formatted correctly, linted, and tested before reaching your repository.

To learn more, check out the Husky documentation. Now, go ahead and supercharge your development process!