--- 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) Install it along with [husky](https://github.com/typicode/husky): ```bash yarn add lint-staged husky --dev ``` and add this config to your `package.json`: ```json { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "*.{js,json,css,md}": ["prettier --write", "git add"] } } ``` **Warning:** Currently there is a limitation where if you stage specific lines this approach will stage the whole file after formatting. See this [issue](https://github.com/okonet/lint-staged/issues/62) for more info. See https://github.com/okonet/lint-staged#configuration for more details about how you can configure lint-staged. ## Option 2. [pretty-quick](https://github.com/azz/pretty-quick) Install it along with [husky](https://github.com/typicode/husky): ```bash yarn add pretty-quick husky --dev ``` and add this config to your `package.json`: ```json { "scripts": { "precommit": "pretty-quick --staged" } } ``` Find more info from [here](https://github.com/azz/pretty-quick). ## Option 3. [pre-commit](https://github.com/pre-commit/pre-commit) (Python version) Copy the following config into your `.pre-commit-config.yaml` file: ```yaml - repo: https://github.com/prettier/prettier sha: '' # Use the sha or tag you want to point at hooks: - id: prettier ``` Find more info from [here](http://pre-commit.com). ## Option 4. bash script Alternately you can save this script as `.git/hooks/pre-commit` and give it execute permission: ```bash #!/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 ```