prettier/website/versioned_docs/version-stable/precommit.md

id	title	original_id
version-stable-precommit	Pre-commit Hook	precommit

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

Use Case: Useful for when you need to use other tools on top of Prettier (e.g. ESLint)

Install it along with husky:

yarn add lint-staged husky --dev

and add this config to your package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}

See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged.

Option 2. pretty-quick

Use Case: Great for when you want an entire file formatting on your changed/staged files.

Install it along with husky:

yarn add pretty-quick husky --dev

and add this config to your package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

Find more info from here.

Option 3. pre-commit

Use Case: Great when working with multi-language projects.

Copy the following config into your .pre-commit-config.yaml file:

- repo: https://github.com/prettier/prettier
  rev: "" # Use the sha or tag you want to point at
  hooks:
    - id: prettier

Find more info from here.

Option 4. precise-commits

Use Case: Great for when you want partial file formatting on your changed/staged files.

Install it along with husky:

yarn add precise-commits husky --dev

and add this config to your package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "precise-commits"
    }
  }
}

Note: This is currently the only tool that will format only staged lines rather than the entire file. See more information here

Read more about this tool here.

Option 5. bash script

Alternately you can save this script as .git/hooks/pre-commit and give it execute permission:

#!/bin/sh
jsfiles=$(git diff --cached --name-only --diff-filter=ACM "*.js" "*.jsx" | tr '\n' ' ')
[ -z "$jsfiles" ] && exit 0

# Prettify all staged .js files
echo "$jsfiles" | xargs ./node_modules/.bin/prettier --write

# Add back the modified/prettified files to staging
echo "$jsfiles" | xargs git add

exit 0

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.

Add something like the following to .git/hooks/post-commit:

#!/bin/sh
git update-index -g