Transform Your Codebase with Prettier: A Guide with Husky Integration
Tags: javascript, husky, prettier
Published: 2023-03-11 15:30:33

## What is Prettier?

Have you ever spent hours formatting your code, only to find inconsistencies throughout your project? [Prettier](https://prettier.io/) 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:

```shell
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:

```json
{
  "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](https://prettier.io/docs/en/ignore.html).

## 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kx1ol7gq5mk4tyzqei6b.png)


**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:
```shell
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
```shell
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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu0fykwsyf32jb8aoz6p.png)


**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!