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

Question

使用Husky ，我使用 precommit 鈎子設置了我的package.json ，以便在每次提交之前使用Prettier格式化我的 JavaScript 代碼：

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

這很好用，但有兩個缺點：

1. 如果我有一個包含數千個 JavaScript 文件的大型項目，我必須等待 Prettier 處理所有這些文件，即使只有少數發生了變化； 這可能需要很長時間，並且在每次提交完成后都會很快讓我感到緊張

2. 有時我只想暫存幾個文件以進行提交，而將其他更改排除在提交之外； 因為我做了一個git add . 運行 Prettier 之后，我所有的更改都將始終在提交中結束

如何在每次提交之前僅在已暫存的文件上運行 Prettier，而忽略未暫存或未更改的文件？

Answer 1

您可以使用lint-staged來做到這一點：

在提交代碼之前運行時，Linting 更有意義。 通過這樣做，您可以確保沒有錯誤進入存儲庫並強制執行代碼樣式。 但是在整個項目上運行 lint 過程很慢，而且 lint 結果可能無關緊要。 最終，您只想對將要提交的文件進行 lint。

該項目包含一個腳本，該腳本將運行任意 npm 和 shell 任務，並將暫存文件列表作為參數，並按指定的 glob 模式進行過濾。

使用以下命令安裝預提交掛鈎所需的lint-staged和husky ：

npm install --save-dev lint-staged husky

更改您的 package.json 如下：

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

Answer 2

我發現剛剛運行：

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

足以滿足我的需要，只是做了一個別名並使用它。

Answer 3

如果您不想添加 devDependency lint-staged ，您也可以使用 Bash 腳本執行相同操作：

#!/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

我用這個包很快

在我的package.json添加腳本

"pretty-quick": "pretty-quick" 

在scripts {}下

然后在我的.husky/pre-commit下的pre-commit鈎子中

我加

npm run pretty-quick

Answer 5

更漂亮的文檔對此有一個部分。

我用相當快

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