Automate Code Formatting with Husky, lint-staged, and Prettier 🛠️

Installing and Setting up Husky 🐶

Husky is a powerful tool that allows you to easily manage Git hooks, which are scripts that run at different points in the Git workflow, such as before a commit or push.

To install and set up Husky in your React project, run:

npx husky-init && npm install

This command initializes Husky in your project, creates a .husky directory, and sets up the required Git hooks. The command will also install necessary dependencies and create a default pre-commit hook, which we will customize later.

Installing lint-staged and Prettier 📦

To format files before they’re committed, we need two more tools: lint-staged and Prettier. lint-staged ensures that only the files you’ve staged for commit get formatted, and Prettier handles the actual formatting.

Install these tools as dev dependencies:

npm i lint-staged prettier -D

The -D flag ensures that these packages are added to the devDependencies section of your package.json, meaning they are used only during development and not in production.

Enabling Git Hooks Automatically ✅

To ensure that the Git hooks are automatically set up after installing dependencies, you’ll need to modify your package.json. Add the following under the "scripts" section:

"scripts": {
    "prepare": "husky install"
}

This script will ensure that Husky’s Git hooks are always initialized after running npm install. So whenever a new developer clones the repository and installs the dependencies, Husky will be set up automatically.

Setting Up Prettier with lint-staged 🚀

Now, let’s configure lint-staged to format your files using Prettier. Add the following configuration to your package.json:

"lint-staged": {
  "*.{json,md,html}": [
    "npx prettier --write"
  ],
  "*.{css,scss}": [
    "npx prettier --write"
  ],
  "*.{js,jsx,ts,tsx}": [
    "npx prettier --write"
  ]
}j

This setup ensures that whenever files with the specified extensions (.json, .md, .html, .css, .scss, .js, .jsx, .ts, and .tsx) are staged for commit, Prettier will automatically format them.

Additionally, if you want to customize Prettier’s configuration, you can create a .prettierrc.json file in the root directory of your project. You can find more about configuring Prettier here.

Creating the Pre-Commit Hook 🪝

To ensure that lint-staged runs before every commit, we need to create a pre-commit hook. We’ll do this using Husky.

Run the following command:

npx husky add .husky/pre-commit "npx lint-staged"

This will create a pre-commit hook inside the .husky directory and configure it to run lint-staged before each commit. Don’t forget to commit this change to version control:

git add .husky/pre-commit

Now, every time you commit, lint-staged will ensure your files are formatted!

Try Making a Commit ✅

Let’s test it out! Try making a commit by running:

git commit -m "test: test code format"

Before the commit goes through, Prettier will format all the staged files as per the configuration in lint-staged. If everything is set up correctly, your files will be formatted, and the commit will be successful!

Conclusion 😉

Congratulations! 🎉 You’ve successfully set up Husky, lint-staged, and Prettier to automate code formatting in your React.js project. Now, every time you make a commit, your code will be automatically formatted. This ensures consistency across your codebase and saves you time by eliminating the need for manual formatting.

To further improve code quality, you can also integrate ESLint into the setup, which will help with enforcing coding standards and detecting potential errors.

With this automated workflow, you can focus more on building your React app, and let Husky and Prettier handle the formatting!

References 🔗

• Husky Documentation
• Prettier Documentation

With this setup, your team can focus more on writing quality code while Husky, lint-staged, and Prettier handle the formatting automatically.

Dizzpy | Happy coding! 🖥️🥰