Angular 项目中 Husky 和 Prettier：自动化代码格式化

在 Angular 项目中使用 Husky 和 Prettier 确保代码一致性

简介

在开发过程中，保持代码风格的一致性至关重要。Prettier 是一个流行的代码格式化工具，可自动确保代码符合既定的样式指南。结合 Husky，一个 Git 钩子管理器，我们可以轻松地在 Angular 项目中设置一个预提交钩子，在提交代码之前自动格式化代码。

如何设置 Husky 预提交钩子

1. 安装依赖项

使用 npm 安装 Husky 和 Prettier：

npm i -D husky prettier

2. 配置 Husky

在 package.json 文件中添加以下 Husky 配置：

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

3. 配置 Lint-Staged

在同一个 package.json 文件中，添加以下 Lint-Staged 配置：

  "lint-staged": {
    "*.{ts,js,json,css,html}": [
      "prettier --write",
      "git add"
    ]
  },

4. 创建示例文件

创建示例文件 src/app/test.ts：

export class Test { nf: string = "not formatted"}

5. 提交代码

运行 git add . && git commit -m "Test" 提交代码。

结果

现在，Prettier 将在预提交钩子触发时自动格式化 test.ts 文件。检查已提交的代码以确认格式正确。

其他说明

• --write 标志指示 Prettier 直接写入文件，而不是仅打印差异。
• git add 命令将格式化后的文件添加到暂存区域。
• 根据需要自定义 .lintstagedrc.json 文件中的受影响文件类型。
• 提交代码前，运行 npm install 以安装依赖项。

结论

通过这些步骤，你已在 Angular 项目中设置了一个 Husky 预提交钩子，可在提交代码前自动格式化代码。这将确保代码风格始终如一，并提高代码可读性和可维护性。

常见问题解答

1. 为什么我需要使用 Prettier？

Prettier 可自动应用一致的代码样式，节省时间并减少争论，从而保持代码一致性。

2. Husky 和 Lint-Staged 之间有什么区别？

Husky 管理 Git 钩子，而 Lint-Staged 允许你为特定文件模式定义格式化任务。

3. 除了本文中列出的文件类型之外，我还可以对哪些文件类型应用格式化？

你可以根据需要自定义 .lintstagedrc.json 文件中的文件类型。

4. 我可以禁用预提交钩子吗？

是的，你可以通过删除 package.json 文件中的 husky 配置或运行 husky install 来禁用预提交钩子。

5. 我遇到的问题如何解决？

请查看 Husky 和 Prettier 的文档，或者在相关社区论坛上寻求帮助。