Question

使用Husky，我已使用预先设置挂钩设置package.json，以便在每次提交之前使用Prettier格式化我的JavaScript代码：

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

这很好用，但有两个缺点：

如果我有一个包含数千个JavaScript文件的大型项目，我必须等待Prettier处理所有这些文件，即使只有少数文件已经更改;这可能需要很长时间，并且在完成每次提交时都会很快就会紧张。
有时我想只提交几个文件进行提交，将其他更改保留在提交之外;因为我在运行Prettier之后执行了git add .，我的所有更改总是会在提交中结束

如何在每次提交之前运行Prettier仅限于已暂存的文件，忽略未分级或未更改的文件？

Answer 1

您可以使用lint-staged执行此操作：

在提交代码之前，Linting在运行时更有意义。通过这样做，您可以确保没有错误进入存储库并强制执行代码样式。但是对整个项目运行一个lint进程很慢，而且linting结果可能无关紧要。最终你只想要提交将要提交的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 | 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
BRANCH=$(git branch | grep \* | cut -d ' ' -f2)
BASE=$(git merge-base master $BRANCH) # change master to whatever your trunk branch is
FILES=$(git diff --name-only $BASE $BRANCH | xargs)

npx prettier --list-different $FILES

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

Answer 4

我使用这个包pretty-quick

add 在我的 package.json 中添加脚本

"pretty-quick": "pretty-quick"

在scripts {}下

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

我补充

npm run pretty-quick

如何在我想要提交的文件上运行更漂亮？

4 个答案: