如何只在我想要提交的文件上运行 Prettier？

Question

Using Husky , I've set up my package.json with a precommit hook so that my JavaScript code is formatted using Prettier before every commit:

{
  "name": "prettier-demo",
  "scripts": {
    "precommit": "prettier --write **/*.js && git add ."
  },
  "devDependencies": {
    "husky": "^0.14.3",
    "prettier": "^1.8.2"
  }
}

This works fine, but there are two drawbacks:

1. If I have a large project with thousands of JavaScript files, I have to wait for Prettier to process all of them, even if only a few have changed; this can take very long and gets on my nerves quickly when it is done with every commit

2. Sometimes I want to stage just a couple of files for committing, leaving other changes out of the commit; because I do a git add . after running Prettier, all my changes will always end up in the commit

How can I run Prettier before every commit only on the files that have been staged , ignoring unstaged or unchanged files?

Answer 1

You can do that using lint-staged :

Linting makes more sense when running before committing your code. By doing that you can ensure no errors are going into repository and enforce code style. But running a lint process on a whole project is slow and linting results can be irrelevant. Ultimately you only want to lint files that will be committed.

This project contains a script that will run arbitrary npm and shell tasks with a list of staged files as an argument, filtered by a specified glob pattern.

Install lint-staged and husky , which is required for pre-commit hooks, with this command:

npm install --save-dev lint-staged husky

Change your package.json as follows:

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "git add"
    ]
  }
}

Answer 2

I found that just running:

prettier --write $(git diff --name-only --diff-filter d | grep '\.js$' | xargs)

was quite enough for my needs, just made an alias and used that.

Answer 3

If you don't want to add the devDependency lint-staged you can also do the same with a Bash script:

#!/usr/bin/env bash
# chmod +x this and save in your PATH. Assumes `prettier` is in your `devDependencies` already
BASE=$(git merge-base master HEAD) # change master to whatever your trunk branch is
FILES=$(git diff --name-only $BASE HEAD | xargs)

npx prettier --list-different $FILES

# Want eslint too?
# npx eslint --ignore-path=.prettierignore $FILES

Answer 4

I use this package pretty-quick

add add a script in my package.json

"pretty-quick": "pretty-quick" 

under scripts {}

Then in my pre-commit hook under .husky/pre-commit

I add

npm run pretty-quick

Answer 5

The prettier docs has a section on this.

I use pretty-quick

npx husky-init
npm install --save-dev pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"