如何在 15 分钟内将 Husky、ESLint、Prettier 集成到项目中（分步指南）

2025-05-27

如何在 15 分钟内将 Husky、ESLint、Prettier 集成到项目中（分步指南）

使用代码格式化程序可以提高代码的可读性，并有助于在整个项目中保持一致的代码风格。在本文中，我们将介绍最流行的 Linter 工具之一 ESLint，它适用于 JavaScript 和 TypeScript。接下来，我们将设置一个用于 HTML 和其他文件的代码格式化程序 Prettier。之后，当我们为它们添加 Husky 钩子时，我们将能够确保团队中的每个成员或项目贡献者都拥有相同的代码风格。

注意：如果您已经在 VS Code 中安装了 Prettier 和 ESLint 扩展，则可以跳过第 1 部分。

1. 向 VSCode 添加扩展（可选）

第一步，向 VSCode 添加扩展（Ctrl + Shift + X）
图片描述
图片描述

2. 安装 Prettier 和 pretty-quick

使用npm安装软件包：

npm install --save-dev prettier pretty-quick
Enter fullscreen mode Exit fullscreen mode

2.1 Prettier - 代码格式化程序的配置

在包含package.json 的目录中创建 2 个文件

.prettierignore.json

package.json
package-lock.json
yarn.lock
dist
node_modules
Enter fullscreen mode Exit fullscreen mode

.prettierrc

{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2
}
Enter fullscreen mode Exit fullscreen mode

该目录应如下所示：

图片描述
如果你问为什么需要 pretty-quick，现在是时候使用它了。有了 pretty-quick，你可以用一个命令对所有文件（或者只对暂存的文件等）运行格式化程序。

npx pretty-quick
Enter fullscreen mode Exit fullscreen mode

图片描述
我们稍后会将此工具与 Husky Hooks 一起集成。

注意：如果您使用Windows Powershell并且在运行npx命令时遇到问题，则必须更改执行策略

set-executionpolicy remotesigned
Enter fullscreen mode Exit fullscreen mode

3. 安装 ESLint

对于本地安装包使用：

npm install eslint
Enter fullscreen mode Exit fullscreen mode

对于全局安装

npm install -g eslint
Enter fullscreen mode Exit fullscreen mode

要生成 ESLint .eslintrc.json的配置文件，您可以从两个选项中进行选择：

3.1. 使用 VSCode 命令面板

在 VSCode 中打开命令面板（Ctrl + Shift + P），
然后运行​​ESLint: Create ESLint configuration。它将直接打开终端并启动配置过程。

3.2. 使用 npm

如果您已经全局安装了 ESLint 包来生成文件，请使用

npm eslint --init
Enter fullscreen mode Exit fullscreen mode

如果您已经在本地安装了 ESLint 包，那么您应该使用稍微不同的命令（Windows）：

 .\node_modules\.bin\eslint --init
Enter fullscreen mode Exit fullscreen mode

对于Linux和Mac：

./node_modules/.bin/eslint --init
Enter fullscreen mode Exit fullscreen mode

两种方法都采用相同的配置过程，您必须回答一些有关 linter 设置的问题。

图片描述

回答完所有问题后，将生成配置文件并安装所有必需的包。

如果您的答案与上一张图片相同，则.eslintrc.json的示例应类似于以下内容：

{
  "root": true,
  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
      "files": ["*.ts"],
      "parserOptions": {
        "project": ["tsconfig.json"],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

5.哈士奇

Git 提供了一种在发生某些操作（例如提交或推送）时触发自定义脚本的方法。您可以使用它在提交或推送时检查提交信息、运行测试、检查代码等等。Husky 支持所有 Git 钩子。

npm install --save-dev husky
Enter fullscreen mode Exit fullscreen mode

5.1 将 Husky 钩子添加到 package.json

"husky": {
    "hooks": {
      "pre-commit": "npx pretty-quick --staged ng lint ng test",
      "pre-push": "ng build --aot true"
    }
Enter fullscreen mode Exit fullscreen mode

5.2 将准备脚本添加到 package.json

"prepare": "cd .. && husky install client/.husky"
Enter fullscreen mode Exit fullscreen mode

注意：您必须从初始化 git 存储库的根目录安装 husky，这就是我必须先更改目录的原因。

5.3 运行准备脚本

npm run prepare
Enter fullscreen mode Exit fullscreen mode

5.4 创建预提交钩子

npx husky add ./client/.husky/pre-commit "npx pretty-quick --staged ng lint ng test"
Enter fullscreen mode Exit fullscreen mode

每次我们启动 git commit 后它都会启动。

5.5 结果

图片描述

如果您喜欢这篇文章，请随意评论或分享。

如果您想用咖啡支持我，您可以在这里做： 我将不胜感激；）给我买杯咖啡

在Twitter上关注我

访问网站smetankajakub.com

资源

https://typicode.github.io/husky/#/
https://docs.microsoft.com/sk-sk/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.1
https://prettier.io/
https://eslint.org/

文章来源：https://dev.to/smetankajakub/how-to-integrate-husky-eslint-prettier-to-project-in-less-than-15-minutes-5gh
Devto 翻译
PREV
5 个可能会给你带来麻烦的 JavaScript“技巧”。
NEXT
Flask Boilerplate - 使用自动化工具构建的开源应用程序