前端项目中使用prettier、lint-staged、husky实现提交时自动修改代码格式

prettier

prettier 是一款广受欢迎的代码格式化工具，它支持许多语言和文件格式，包括 JavaScript、TypeScript、CSS、HTML、Markdown 等。Prettier 的主要作用是自动格式化代码文件，确保代码风格的一致性。

prettier 的使用

安装 prettier 和 prettier VSCode插件

bash 复制代码

npm install prettier -D

prettier VSCode 插件让我们可以使用快捷键对项目进行格式化

CLI

我们可以使用 prettier 命令来运行 prettier

bash 复制代码

prettier [options] [file/dir/glob ...]

# 格式化当前目录及其子目录中 prettier 支持的所有文件
prettier --write .

退出代码

代码	信息
0	一切格式正确
1	有些东西格式不正确
2	Prettier 出了点问题

如果 prettier 不能正确的格式化代码，prettier 命令则会返回 非0 的退出状态码

配置化

prettier 有默认的格式化规则，同时也提供了丰富的配置选项，如果我们有自定义规则的需求可以在项目根目录中新增 .prettierrc.js 文件，然后在其中指定你的自定义规则。

json 复制代码

// .prettierrc.js 文件
module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
}

详细信息可以看官网的配置项：prettier.io/docs/en/opt...

VSCode指定格式化工具

然而，在实际开发中可能会出现这样一种情况，虽然已经安装了 prettier 并创建了配置文件，但格式化后的代码并非是我们预期的结果。这可能是因为 VSCode 编辑器没有正确使用到 prettier 工具，此时我们需要在 .vscode目录下的 setting.json 文件中明确指定格式化工具。

json 复制代码

// setting.json
{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

上面的代码就指定了vue、javascript、typescript等格式的文件都用prettier VScode插件进行格式化。

最理想的情况是，在提交代码前自动进行代码格式化，确保代码的规范性。这个任务可以通过 lint-staged 来实现，它是一个能在git暂存文件上运行linters的工具。原理是在 git commit 前触发 pre-commit 钩子，执行定义好的格式化命令。

lint-staged

lint-staged 是一个在 git 暂存文件（被git add 的文件）上运行 liters 的工具。

安装 lint-staged

bash 复制代码

npm install lint-staged -D

在package.json中定义

json 复制代码

{
    "lint-staged": {
        "*": "prettier --write"
      }
}

验证 lint-staged 的作用

现在暂存区的文件改动为：

执行 pnpm lint-staged 或 npm exec lint-staged 命令后，暂存区的文件为：

可以看到已经对暂存区的文件成功执行了 prettier write

此外，为了让 pre-commit 钩子在提交前自动执行，我们还需要借助一个名为 husky 的工具。Husky 能够帮助我们管理和触发 git hooks。

husky

关于 husky 在我之前文章有介绍过：前端项目使用husky、commitlint/cli实现git提交规范&一些坑，大家可以通过这篇文章了解husky的使用。

总而言之，husky 能让我们监听 git hooks，在 hook 执行期间执行我们定义好的脚本。

如我们想要实现提交代码时自动修改代码格式，则需要监听 pre-commit 钩子。

husky 旧版使用

安装好 husky 我们在 package.json 中定义

json 复制代码

{
  "husky": {
    "hooks": {
      "pre-commit": "pnpm lint-staged"
    }
  },
  "lint-staged": {
    "*": [
      "prettier --write",
    ]
  }
}

husky 新版（6.0.0+）使用

旧版的 husky 会在 .git/hooks 目录下创建所有类型的 git hooks。新版的 husky 使用了从 git 2.9 开始引入的一个新功能 core.hooksPath。core.hooksPath 可以让你指定 git hooks 所在的目录而不是使用默认的 .git/hooks/。

我们可以执行 husky install 将 git hooks 的目录指定为 ./husky，然后使用 husky add 命令向 ./husky/ 中添加 hook

安装 huksy

bash 复制代码

npm install husky -D

添加prepare脚本

json 复制代码

{
  "scripts": {
    "prepare": "husky install"
  }
}

新版本中执行 husky init 能帮我们更新 package.json 文件中的 prepare 命令并初始化 ./husky 目录下的 pre-commit 脚本。

添加 pre-commit hooks

bash 复制代码

npx husky add .husky/pre-commit "npm exec lint-staged"

上面的代码就是在 pre-commit 期间执行 pnpm lint-staged 命令，而 pnpm lint-staged 命令则是在给暂存区的文件执行 prettier --write 进行代码格式化。

验证

通过上图能知道，执行 git commit 前 h1 标签是没有经过 prettier 格式化的。

当我们执行 git commit 后，能看到 pre-commit 运行的脚本对代码进行了格式化处理。

如果是 Vue3 项目，可以在进行提交时使用 vue-tsc 进行类型检查，package.json 修改为

json 复制代码

{
  "scripts": {
    "check": "vue-tsc --noEmit",
  },
}

pre-commit 脚本为

bash 复制代码

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run check && npm exec lint-staged

如果 vue-tsc 检测出有不存在的类型，vue-tsc 就会返回非0的状态码，pre-commit 钩子接收到非0的状态码就会中断 git 提交过程。