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

Question

使用Husky,我已经设置了package.json一个precommit钩子,以便在每次提交之前使用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进程很慢,而且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

我很快就使用了这个包

在我的中添加了一个脚本package.json

"pretty-quick": "pretty-quick" 

在下面scripts {}

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

我添加了

`npm run pretty-quick`

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

我发现只是运行：

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

足以满足我的需要，只是做了一个别名并使用了它。