Files

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

255 lines
8.0 KiB
Markdown
Raw Permalink Normal View History

---
id: precommit
title: Pre-commit Hook
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
2020-07-01 08:44:21 +02:00
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)
2019-04-12 17:35:23 -03:00
**Use Case:** Useful for when you want to use other code quality tools along with Prettier (e.g. ESLint, Stylelint, etc.) or if you need support for partially staged files (`git add --patch`).
2019-10-18 16:36:24 +08:00
_Make sure Prettier is installed and is in your [`devDependencies`](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file) before you proceed._
```bash
2021-09-16 15:06:00 +09:00
npx mrm@2 lint-staged
```
2019-04-12 17:35:23 -03:00
This will install [husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged), then add a configuration to the project’s `package.json` that will automatically format supported files in a pre-commit hook.
2020-07-01 08:44:21 +02:00
Read more at the [lint-staged](https://github.com/okonet/lint-staged#configuration) repo.
## Option 2. [pretty-quick](https://github.com/prettier/pretty-quick)
**Use Case:** Great for when you want an entire file formatting on your changed/staged files.
Install it along with [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks):
<Tabs groupId="package-manager">
<TabItem value="npm">
```bash
npm install --save-dev simple-git-hooks pretty-quick
2026-06-27 18:23:17 +08:00
node --eval "fs.writeFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'npx pretty-quick --staged'},undefined,2)+'\n')"
npx simple-git-hooks
```
</TabItem>
<TabItem value="yarn">
```bash
yarn add --dev simple-git-hooks pretty-quick
2026-06-27 18:23:17 +08:00
node --eval "fs.writeFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'yarn pretty-quick --staged'},undefined,2)+'\n')"
yarn simple-git-hooks
```
</TabItem>
<TabItem value="pnpm">
```bash
pnpm add --save-dev simple-git-hooks pretty-quick
2026-06-27 18:23:17 +08:00
node --eval "fs.writeFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'pnpm pretty-quick --staged'},undefined,2)+'\n')"
pnpm simple-git-hooks
```
</TabItem>
<TabItem value="bun">
```bash
bun add --dev simple-git-hooks pretty-quick
2026-06-27 18:23:17 +08:00
node --eval "fs.writeFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'bun pretty-quick --staged'},undefined,2)+'\n')"
bun simple-git-hooks
```
2026-06-27 18:23:17 +08:00
</TabItem>
<TabItem value="deno">
```bash
deno install --dev simple-git-hooks pretty-quick
deno eval "Deno.writeTextFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'deno x pretty-quick --staged'},undefined,2)+'\n')"
deno x simple-git-hooks
```
</TabItem>
</Tabs>
Read more at the [pretty-quick](https://github.com/prettier/pretty-quick) repo.
## Option 3. [Husky.Net](https://github.com/alirezanet/Husky.Net)
2022-01-05 05:13:23 +03:30
**Use Case:** A dotnet solution to use Prettier along with other code quality tools (e.g. dotnet-format, ESLint, Stylelint, etc.). It supports multiple file states (staged - last-commit, git-files etc.)
```bash
2022-12-15 07:50:24 +01:00
dotnet new tool-manifest
2022-01-05 05:13:23 +03:30
dotnet tool install husky
dotnet husky install
2022-12-15 07:50:24 +01:00
dotnet husky add pre-commit
2022-01-05 05:13:23 +03:30
```
after installation you can add prettier task to the `task-runner.json`.
2026-06-27 18:23:17 +08:00
```json title="task-runner.json"
2022-01-05 05:13:23 +03:30
{
"command": "npx",
"args": ["prettier", "--ignore-unknown", "--write", "${staged}"],
"pathMode": "absolute"
}
```
## Option 4. [git-format-staged](https://github.com/hallettj/git-format-staged)
2020-03-21 21:59:05 +02:00
**Use Case:** Great for when you want to format partially-staged files, and other options do not provide a good fit for your project.
Git-format-staged is used to run any formatter that can accept file content via stdin. It operates differently than other tools that format partially-staged files: it applies the formatter directly to objects in the git object database, and merges changes back to the working tree. This procedure provides several guarantees:
1. Changes in commits are always formatted.
2. Unstaged changes are never, under any circumstances staged during the formatting process.
2020-07-01 08:44:21 +02:00
3. If there are conflicts between formatted, staged changes and unstaged changes then your working tree files are left untouched - your work won’t be overwritten, and there are no stashes to clean up.
2020-03-21 21:59:05 +02:00
4. Unstaged changes are not formatted.
Git-format-staged requires Python v3 or v2.7. Python is usually pre-installed on Linux and macOS, but not on Windows. Use git-format-staged with [husky](https://github.com/typicode/husky):
<Tabs groupId="package-manager">
<TabItem value="npm">
2020-07-01 08:44:21 +02:00
2020-03-21 21:59:05 +02:00
```bash
npx husky init
2021-05-10 00:00:41 +03:00
npm install --save-dev git-format-staged
node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
2020-03-21 21:59:05 +02:00
```
</TabItem>
<TabItem value="yarn">
2020-07-01 08:44:21 +02:00
```bash
yarn husky init
2021-05-10 00:00:41 +03:00
yarn add --dev git-format-staged
node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
2020-07-01 08:44:21 +02:00
```
</TabItem>
<TabItem value="pnpm">
2023-07-05 21:41:09 +09:00
```bash
pnpm exec husky init
2023-07-05 21:41:09 +09:00
pnpm add --save-dev git-format-staged
node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
2023-07-05 21:41:09 +09:00
```
</TabItem>
<TabItem value="bun">
2024-04-10 11:40:26 +02:00
```bash
bunx husky init
bun add --dev git-format-staged
bun --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
2024-04-10 11:40:26 +02:00
```
2026-06-27 18:23:17 +08:00
</TabItem>
<TabItem value="deno">
```bash
deno x husky init
deno install --dev git-format-staged
deno eval "Deno.writeTextFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
```
</TabItem>
</Tabs>
2020-07-01 08:44:21 +02:00
2020-03-21 21:59:05 +02:00
Add or remove file extensions to suit your project. Note that regardless of which extensions you list formatting will respect any `.prettierignore` files in your project.
To read about how git-format-staged works see [Automatic Code Formatting for Partially-Staged Files](https://www.olioapps.com/blog/automatic-code-formatting/).
## Option 5. [Lefthook](https://lefthook.dev/)
**Use Case:** A fast, polyglot Git hooks manager with built-in parallelization. Useful if you want a single tool that can run Prettier alongside hooks for other languages in the same repo.
Add a Prettier job to a `lefthook.yml` file at the repo root:
```yaml title="lefthook.yml"
pre-commit:
jobs:
- name: prettier
run: npx prettier --ignore-unknown --write '{staged_files}'
stage_fixed: true
```
`stage_fixed: true` re-stages files that Prettier modified so the formatted version is what gets committed.
Then install Lefthook and run `lefthook install` so Lefthook wires up the configured jobs into `.git/hooks`:
<Tabs groupId="package-manager">
<TabItem value="npm">
```bash
npm install --save-dev lefthook
npx lefthook install
```
</TabItem>
<TabItem value="yarn">
```bash
yarn add --dev lefthook
yarn lefthook install
```
</TabItem>
<TabItem value="pnpm">
```bash
pnpm add --save-dev lefthook
pnpm lefthook install
```
</TabItem>
<TabItem value="bun">
```bash
bun add --dev lefthook
bunx lefthook install
```
</TabItem>
<TabItem value="deno">
```bash
deno install --dev lefthook
deno x lefthook install
```
</TabItem>
</Tabs>
Re-run `lefthook install` whenever you change `lefthook.yml`. Read more at the [Lefthook](https://lefthook.dev/) website.
## Option 6. Shell script
Alternately you can save this script as `.git/hooks/pre-commit` and give it execute permission:
2026-06-27 18:23:17 +08:00
```sh title=".git/hooks/pre-commit"
#!/bin/sh
2021-05-10 00:00:41 +03:00
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
2019-01-20 15:59:39 +08:00
[ -z "$FILES" ] && exit 0
2019-01-20 15:59:39 +08:00
# Prettify all selected files
2021-05-10 00:00:41 +03:00
echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write
# Add back the modified/prettified files to staging
2019-01-20 15:59:39 +08:00
echo "$FILES" | xargs git add
exit 0
```
2020-07-01 08:44:21 +02: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](https://github.com/prettier/prettier/issues/2978#issuecomment-334408427).
Add something like the following to `.git/hooks/post-commit`:
2026-06-27 18:23:17 +08:00
```sh title=".git/hooks/post-commit"
#!/bin/sh
git update-index -g
```