Transform Your Codebase with Prettier: A Guide with Husky Integration

What is Prettier?

Have you ever spent hours formatting your code, only to find inconsistencies throughout your project? Prettier can help! It’s a tool that automatically formats your code for you, making it consistent, readable, and easy to maintain.

How to Install Prettier

Don’t worry, installing Prettier is easy! You just need to run a command in your terminal. If you’re using npm, you can run:

npm install --save-dev prettier
yarn add -D prettier

Before we run Prettier, we can configure it by creating a .prettierrc file. This is optional, and if you don't create one Prettier will simply use its own opinionated defaults.

Here is a sample configuration:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

For the sake of learning I create a simple project and install prettier on it:

npm init -y

Then inside the project I add simple js file like bellow!

function
 test() { let x=[ 1,  1 ,123]; x.push( 2); return x 
}

console.log(
test())

such a mess!

But if you run following command you would see everything going to be perfect:

npx prettier - write index.js

Ignoring Code

You may have some files in your project that you don’t want to waste resources on auto-formatting. To handle these simply create a .prettierignore file with the name (or pattern) of files you wish to ignore:

build
node_modules

Also you may have code within files that you intentionally have formatted in a certain way that you don’t want Prettier to overwrite.

Here is a sample in js file:

// prettier-ignore
const axiosInstance => (ctx) => {
...

Ignoring comment could be different on file format you can find the full list here.

How to Use Prettier

Once you’ve installed Prettier, you can use it in a few different ways:

1. Use the CLI
If you’re comfortable with the command line, you can use the Prettier CLI to format your code. Just run:

npx prettier --write script.js

This will format all the JavaScript files in your project and write the changes to the files.

2. Use an editor plugin
If you prefer to use an editor, you can install a plugin that integrates with Prettier. For example, if you’re using Visual Studio Code, you can install the “Prettier — Code formatter” extension.

Once you have it installed, you need to go File > Preferences > Settings menu and enable it:

3. Use a pre-commit hook with Husky
If you want to automate the formatting process, you can set up a pre-commit hook with Husky. This will run Prettier on all the files you’re committing before the commit is made. Here’s how to set it up:
How to integrate Prettier with Husky

Install Husky

You’ll need to install Husky first. You can do this with the following command:

npm install husky --save-dev
yarn add -D husky

2. Enable Git hooks
Next you need to run bellow command to automatically add your defined hooks with husky into git

npx husky install
npx husky add .husky/pre-commit "yarn format"

This will create a directory like bellow in your project, and every commit will run the following pre-commit command:

3. Edit package.json
Next, you need to configure format command to run Prettier before committing. Open the package.json file in your project and add the following code:

"format": "prettier --write . && git add -A ."

I use git add to store all of those changes and include them in the commit.

Now you’re all set! Whenever you run git commit, Husky will automatically format your code using Prettier before committing the changes.

And that’s it!

Prettier can be integrated into your Continuous Integration workflow so that each team member has it run automatically before committing code. With git diff and merges and pull requests, all code committed by all team members will match the same pattern, so reporting changes is much less time-consuming.

With Prettier and Husky, you can make your codebase consistent, readable, and easy to maintain.

Happy coding!