DEV Community

Cover image for Automate Your Code Formatting with Prettier and Husky: A Complete Guide
Arindam Chowdhury
Arindam Chowdhury

Posted on

Automate Your Code Formatting with Prettier and Husky: A Complete Guide

As developers, we all want our code to be consistent and easy to read. After all, we don't want to read badly formatted code written by others.

Gif description

However, when working in a team or on a large project, maintaining consistent code formatting can be a challenge. That's where Prettier and Husky come in.

Prettier is a popular code formatter that automatically formats code according to a set of rules. Husky is a popular Git hook manager that makes it easier to manage and configure Git. One can run scripts automatically before each commit, allowing developers to ensure that code is properly formatted before it is committed to the repository.

In this post, we'll walk through the steps of setting up Prettier and Husky to ensure consistent code formatting in your projects.

Setting up Prettier


The first step is to install the Prettier package in your project.

npm install --save-dev prettier
Enter fullscreen mode Exit fullscreen mode

Next, you'll need to create a configuration file for Prettier. This file should be named .prettierrc and should be located in the root directory of your project. Here's the one which I use mostly:

    "parser": "babel",
    "arrowParens": "avoid",
    "trailingComma": "es5",
    "singleQuote": true,
    "semi": false,
    "useTabs": true,
    "tabWidth": 2,
    "jsxSingleQuote": true
Enter fullscreen mode Exit fullscreen mode

This configuration file specifies that Prettier sets options such as using Babel to parse the code, omitting parentheses when possible for arrow function parameters, using a trailing comma if allowed by the language, using single quotes for string literals and JSX attributes, omitting semicolons, using tabs for indentation, and setting the tab width to 2 spaces.

Once you have installed Prettier and created a configuration file, you can add a prettier:write a script to your package.json file. This script will allow you to format code automatically using Prettier.

"scripts": {
  "prettier:write": "prettier --write \"src/**/*.{js,jsx}\""
Enter fullscreen mode Exit fullscreen mode

Now, this will allow prettier to write on all the files which are inside src folder, with an extension of js, jsx. So, your whole project will get modified, and there would be too many changes if it's a big project.


But, if you want to only use prettier to change the files that are being committed, and not the whole project, set up this code:

  "scripts": {
    "prettier:write": "git diff --cached --name-only --diff-filter=ACMR \"*.js\" \"*.jsx\" \"*.ts\" \"*.tsx\" | xargs npx prettier --config .prettierrc --write"
Enter fullscreen mode Exit fullscreen mode

This script runs the git diff command to get a list of files (*.js, .jsx, .ts, and .tsx) that have been changed. xargs is a command-line utility that allows you to take the output from one command and use it as arguments for another command. In this case, xargs is used to pass the list of files selected by the git diff command as arguments to the npx prettier command which runs Prettier on each file.

Setting Up Husky

Now that you've set up the Prettier configuration to format your code, it's time to set up Husky.

Step 1: Install Husky

First, you'll need to install Husky as a dev dependency in your project, as well as initialize it using husky-init.

npx husky-init && npm install
Enter fullscreen mode Exit fullscreen mode

It will set up husky, modify package.json and create a sample pre-commit hook that you can edit. By default, it will run npm test when you commit.

Step 2:

Configure Husky to run prettier before committing. For this, open this file .husky/pre-commit. You can remove npm test, if it's not required.

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

npm test

# Run Prettier
npm run prettier:write

# Add the formatted files back to the staging area
git add .
Enter fullscreen mode Exit fullscreen mode

The git add . command is also included to add any changes made by Prettier to the staging area.


Now that you've set up Husky to run Prettier before each commit, you can test the setup by making changes to your code. Do git add . followed by git commit. Husky should automatically run Prettier before the commit is made, and you should see the changes reflected in the file.

P.S.: I put ChatGPT to work for creating my prettier:write script, and it did not disappoint! If you need any custom configuration, give it a try!


Top comments (0)