2017-11-07 06:39:07 +03:00
---
id: precommit
title: Pre-commit Hook
---
You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via `git add` before you commit.
## Option 1. [lint-staged](https://github.com/okonet/lint-staged)
2018-02-02 06:46:17 +03:00
**Use Case:** Useful for when you need to use other tools on top of Prettier (e.g. ESLint)
2017-11-07 06:39:07 +03:00
Install it along with [husky ](https://github.com/typicode/husky ):
```bash
2018-09-24 08:31:50 +03:00
yarn add lint-staged husky --dev
2017-11-07 06:39:07 +03:00
```
and add this config to your `package.json` :
```json
{
2018-07-04 16:15:46 +03:00
"husky": {
2018-07-04 18:31:49 +03:00
"hooks": {
2018-07-04 16:15:46 +03:00
"pre-commit": "lint-staged"
}
2017-11-07 06:39:07 +03:00
},
"lint-staged": {
2017-12-06 12:34:58 +03:00
"*.{js,json,css,md}": ["prettier --write", "git add"]
2017-11-07 06:39:07 +03:00
}
}
```
2017-11-22 14:27:40 +03:00
2017-11-07 06:39:07 +03:00
See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.
2018-01-08 18:19:53 +03:00
## Option 2. [pretty-quick](https://github.com/azz/pretty-quick)
2017-12-20 23:08:42 +03:00
2018-02-02 06:46:17 +03:00
**Use Case:** Great for when you want an entire file formatting on your changed/staged files.
2018-01-08 18:19:53 +03:00
Install it along with [husky ](https://github.com/typicode/husky ):
2017-12-20 23:08:42 +03:00
```bash
2018-09-24 08:31:50 +03:00
yarn add pretty-quick husky --dev
2017-12-20 23:08:42 +03:00
```
and add this config to your `package.json` :
```json
{
2018-07-04 16:15:46 +03:00
"husky": {
2018-07-04 18:31:49 +03:00
"hooks": {
2018-07-04 16:15:46 +03:00
"pre-commit": "pretty-quick --staged"
}
2018-01-08 18:19:53 +03:00
}
2017-12-20 23:08:42 +03:00
}
```
2018-01-08 18:19:53 +03:00
Find more info from [here ](https://github.com/azz/pretty-quick ).
2017-12-20 23:08:42 +03:00
2018-03-02 18:14:20 +03:00
## Option 3. [pre-commit](https://github.com/pre-commit/pre-commit)
2017-11-07 06:39:07 +03:00
2018-02-02 06:46:17 +03:00
**Use Case:** Great when working with multi-language projects.
2017-11-07 06:39:07 +03:00
Copy the following config into your `.pre-commit-config.yaml` file:
```yaml
2018-07-29 10:44:21 +03:00
- repo: https://github.com/prettier/prettier
rev: "" # Use the sha or tag you want to point at
hooks:
- id: prettier
2017-11-07 06:39:07 +03:00
```
2018-03-02 15:26:36 +03:00
Find more info from [here ](https://pre-commit.com ).
2017-11-07 06:39:07 +03:00
2018-02-02 06:46:17 +03:00
## Option 4. [precise-commits](https://github.com/JamesHenry/precise-commits)
2018-10-07 14:42:41 +03:00
**Use Case:** Great for when you want partial file formatting on your changed/staged files.
2018-02-02 06:46:17 +03:00
Install it along with [husky ](https://github.com/typicode/husky ):
```bash
2018-09-24 08:31:50 +03:00
yarn add precise-commits husky --dev
2018-02-02 06:46:17 +03:00
```
and add this config to your `package.json` :
```json
{
2018-07-04 16:15:46 +03:00
"husky": {
2018-07-04 18:31:49 +03:00
"hooks": {
2018-07-04 16:15:46 +03:00
"pre-commit": "precise-commits"
}
2018-02-02 06:46:17 +03:00
}
}
```
**Note:** This is currently the only tool that will format only staged lines rather than the entire file. See more information [here ](https://github.com/JamesHenry/precise-commits#why-precise-commits )
Read more about this tool [here ](https://github.com/JamesHenry/precise-commits#2-precommit-hook ).
## Option 5. bash script
2017-11-07 06:39:07 +03:00
Alternately you can save this script as `.git/hooks/pre-commit` and give it execute permission:
```bash
#!/bin/sh
2019-01-08 09:30:20 +03:00
FILES=$(git diff --cached --name-only --diff-filter=ACM "*.js" "*.jsx" | sed 's| |\\ |g')
[ -z "$FILES" ] & & exit 0
2017-11-07 06:39:07 +03:00
2019-01-08 09:30:20 +03:00
# Prettify all selected files
echo "$FILES" | xargs ./node_modules/.bin/prettier --write
2017-11-07 06:39:07 +03:00
# Add back the modified/prettified files to staging
2019-01-08 09:30:20 +03:00
echo "$FILES" | xargs git add
2017-11-07 06:39:07 +03:00
exit 0
```
2018-02-24 11:12:25 +03:00
If git is reporting that your prettified files are still modified after committing, you may need to add a post-commit script to update git's index as described in [this issue ](https://github.com/prettier/prettier/issues/2978#issuecomment-334408427 ).
Add something like the following to `.git/hooks/post-commit` :
```bash
#!/bin/sh
git update-index -g
```