Using Prettier and husky to make your commits safe.
Tags: git, continuousintegrati, javascript
Published: 2018-02-10 22:32:39

---
title: "Using Prettier and husky to make your commits safe."
published: true
tags: git,continuous-integrati,javascript
canonical_url: 
---

Whether you work in a team or by yourself, having consistently formatted code is important for readability and maintainability.

#### Tl;dr

Use Prettier to automatically format your JavaScript and use husky and lint-staged to add a precommit script that runs Prettier and your tests when you&nbsp;commit.

Check out the full&nbsp;code:

[bartw/pretty\_husky](https://github.com/bartw/pretty_husky)

#### ESLint vs JavaScript Standard Style vs&nbsp;Prettier

For JavaScript there are solutions like [ESLint](http://eslint.org/)that can check if your code is consistent. But [ESLint](http://eslint.org/)requires a lot of configuration and while it can fix some things by itself, it often requires manual intervention when you screw&nbsp;up.

Then there is [JavaScript Standard Style](https://standardjs.com/). This module is the complete opposite of ESLint. It requires no configuration and can also fix some of your code by itself. But having no configuration, it’s very opinionated.

And now there is also [Prettier](https://github.com/prettier/prettier). The difference between Prettier and other lint tools is that Prettier doesn’t check your code. It just takes your code as input and spits out formatted code as output. Like JavaScript Standard Style, Prettier is opinionated but you have some options to customize the format. Because Prettier doesn’t check your code but parses it, everything will be fixed automatically. Sounds like the best of both&nbsp;worlds.

#### Hello Prettier

The best way to see the greatness of Prettier is to try it&nbsp;out.

Fire up your terminal and start&nbsp;typing:

```javascript
mkdir pretty_husky
cd pretty_husky
npm init -y
npm install --save-dev prettier
mkdir src
touch ./src/foo.test.js
code .
```

Now you can write some poorly formatted code in foo.test.js:

```javascript
test('this needs to be prettier.', () => {
expect(4).toBe(4)
})
```

And add a script package.json to run Prettier:

```javascript
"scripts": {
    "pretty": "prettier--write --tab-width 4 \"src/**/*.js\""
}
```

Now you can run Prettier from your terminal:

```javascript
npm run pretty
```

And you can see that the contents of foo.test.js have changed&nbsp;to:

```javascript
test("this needs to be prettier.", () => {
    expect(4).toBe(4);
});
```

#### What about that&nbsp;husky?

Prettier makes your code look pretty but what if you forget to run it before you check&nbsp;in?

You could run Prettier as a step during continuous integration but then you have to check your code in again if there are changes. It would be much easier if you made sure that no “ugly files can be pushed or committed.

This is where [husky](https://github.com/typicode/husky) comes in. [Husky](https://github.com/typicode/husky) makes creating git hooks easy. Git hooks are scripts that git executes before or after and event. If husky runs Prettier for us then “ugly files can never be committed. But it’s not that easy. Husky can run Prettier but the changed files won’t be added to our&nbsp;commit.

This problem can be solved by [lint-staged](https://github.com/okonet/lint-staged). Lint-staged can run a lint tool, like Prettier, and immediately add them to the staged&nbsp;files.

#### Hook me&nbsp;up!

If you haven’t created a git repository yet now is the time, your hooks won’t work without a repository:

```javascript
git init
touch .gitignore
```

Add “node\_modules to the&nbsp;.gitignore file to avoid checking in too&nbsp;much:

```javascript
node_modules
```

Go back to your terminal and install husky for the hooks, lint-staged for adding the formatted files to the staged files and Jest to run some&nbsp;tests:

```javascript
npm install --save-dev husky lint-staged jest
```

Create some scripts to hook everything up in your package.json file:

```javascript
"scripts": {
    "test": "jest",
    "pretty": "prettier --write --tab-width 4 \"src/**/*.js\"",
    "precommit": "npm run pretty && npm test"
},
"lint-staged": {
    "*.js": [
        "npm run pretty",
        "git add"
    ]
}
```

Make some ugly and failing tests in foo.test.js:

```javascript
test('ugly', () => {
expect(4).toBe(4)
})

test('failing', () => {
    expect(4).toBe(5);
});
```

Now try to&nbsp;commit:

```javascript
git add .
git commit -m"will this work?"
```

The script ran and the test failed, foo.test.js got&nbsp;updated:

```javascript
test("ugly", () => {
    expect(4).toBe(4);
});

test("failing", () => {
    expect(4).toBe(5);
});
```

And husky stopped the&nbsp;commit:

```
> husky - pre-commit hook failed (add --no-verify to bypass)
> husky - to debug, use 'npm run precommit'
```

If you fix the test and try again the commit should&nbsp;work.

#### Conclusion

Prettier, husky and lint-staged can improve your workflow by formatting your JavaScript files and running some scripts before every&nbsp;commit.

Check out the full code on&nbsp;[GitHub](https://github.com/bartw/pretty_husky).