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

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"
  }
}

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

如果我有一个包含数千个 JavaScript 文件的大型项目，我必须等待 Prettier 处理所有这些文件，即使只有少数发生了变化；这可能需要很长时间，并且在每次提交完成后都会很快让我感到紧张
有时我只想暂存几个文件以进行提交，而将其他更改排除在提交之外；因为我git add .在运行 Prettier 之后做了一个，所以我所有的更改总是会在提交中结束

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

score 18 · Accepted Answer

您可以使用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"
    ]
  }
}

score 9 · Accepted Answer

我发现刚刚运行：

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

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

score 4 · Accepted Answer

如果您不想添加 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

score 1 · Accepted Answer

我用这个包很快

在我的添加脚本package.json

"pretty-quick": "pretty-quick"

在下面scripts {}

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

我加

npm run pretty-quick

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

4 回答 4

Related

Reference