从 ESLint 到 Husky：前端代码规范一站式教程

快乐就是哈哈哈
967 阅读8分钟

前言

最近公司的活比较少，一直在进行代码审查，领导也一直在推行前端的代码规范化。借此机会，我将这几天学习的知识做一个梳理。

代码规范化的作用不仅在于减少潜在错误，还能让团队协作更加高效和愉快。现在，借助工具链来实现自动化的代码检查、格式化和提交校验是前端开发的主流。

本文将以 ESLint 和 Husky 为核心，逐步搭建一套高效的代码规范体系，同时整合 Prettier、lint-staged 和 VS Code 插件，覆盖从开发到代码提交的全流程。

如果有不对的地方，欢迎大家指教~

前端工程化中的常见工具

以下是前端工程化中常见的工具及其对应功能：

工具功能代表工具
代码质量检查提前发现潜在问题和语法错误ESLint
代码格式化统一代码风格，避免格式争议Prettier
自动化校验提交前检查代码是否符合规范Husky、lint-staged
开发体验优化提供即时反馈，保存时自动修复问题VS Code 插件

本文将详细介绍前端工程化的常见工具。

ESLint：代码质量守护者

什么是 ESLint？

ESLint 是目前前端开发中最流行的静态代码检查工具。它通过分析代码，提前发现语法错误、逻辑问题，并帮助开发者遵守团队约定的代码风格。

他的主要功能如下：

  • 语法检查：如检测未定义变量、未使用的变量等问题。
  • 规则强制：如必须使用全等 (===) 而非等于 (==)。
  • 支持插件：可扩展支持 React、Vue 等框架的特定规则。

关于Eslint的详细介绍参考：juejin.cn/post/739702…

使用

现代的前端脚手架项目中，eslint基本上都是一个内置的工具，我们基本不需要额外安装依赖，就可以使用。

它的核心是一个.eslintrc.xxx的配置文件。

关于配置文件的详细介绍，可以参考：eslint的配置文件

例如 .eslintrc.json

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "rules": {
    "no-unused-vars": "warn",
    "eqeqeq": "error",
    "semi": ["error", "always"]
  }
}

配置好文件后，我们在控制台运行相应的命令，就可以执行代码检查

npx eslint .

上述命令会将代码中可能的错误输出在控制台。如果你希望eslint还能帮我们自动修复代码，那么我们还可以执行他的--fix命令，后文我们将继续介绍。

也可以参考我的其他关于eslint --fix的文章：

Vscode中的ESlint

每次手动执行eslint命令查看代码提示是非常麻烦的，因此，在Vscode中有一个名为“Eslint”的插件

我们安装这个插件后，项目中哪些代码触发了EsLint报错的规则，就会实事给我们展示出来，非常方便。

Prettier：代码格式化助手

Prettier 是一个专注于代码格式化的工具，它可以自动调整代码风格，使代码保持一致性和可读性。

前端脚手架中的Prettier

并非所有前端脚手架中都安装有Prettier，因此，我们可能需要先安装它然后才能使用。

安装

npm install prettier -D

配置 Prettier

Prettier也需要通过配置文件配置，才能在项目中运行。我们可以在项目根目录新建 一个名为.prettierrc 文件，配置内容如下：

{
  "singleQuote": true,
    "semi": false,
    "trailingComma": "es5",
    "printWidth": 80,
    "tabWidth": 2
}

上述配置的代码规范如下：

  • singleQuote：使用单引号（默认 false）。
  • semi：行尾是否加分号（默认 true）。
  • trailingComma：对象或数组多行时尾逗号的处理方式（none、es5、all）。
  • printWidth：每行的最大字符数（默认 80）。
  • tabWidth：缩进使用的空格数（默认 2）。

其他配置可以参考Prettier官网。

使用 Prettier

手动格式化代码
运行以下命令格式化项目中所有文件：

npx prettier --write .

或格式化特定文件夹/文件：

npx prettier --write src/
npx prettier --write src/App.vue

结合脚本自动化格式化
在 package.json 中添加格式化脚本：

"scripts": {
  "format": "prettier --write ."
}

运行以下命令即可格式化：

npm run format

格式化后的代码，空格、换行等格式样式都会随着配置变化。

Vscode中的Prettier

每次使用命令格式化代码是非常麻烦低效的，在Vscode中，有一款名为Prettier的插件。

在它的帮助下，每次写完代码，点击ctrl + s，就可以实时更改代码格式，就像这样：

如果你的编译器不生效，你需要简单配置一下编译器。在 .vscode/settings.json 中添加：

{
  "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

ESLint 和 Prettier 的结合

在项目中，ESLint 和 Prettier 的规则可能存在冲突。例如，ESLint 可能强制某种格式，而 Prettier 会直接重写代码。为了解决这种冲突，我们需要通过插件整合它们。

安装整合插件

npm install eslint-config-prettier eslint-plugin-prettier -D

配置 ESLint

更新 .eslintrc.json 文件：


{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
    "rules": {
    "prettier/prettier": "error"
  }
}

此配置的作用：

  • eslint-config-prettier：关闭 ESLint 中与 Prettier 冲突的规则。
  • eslint-plugin-prettier：将 Prettier 的问题以 ESLint 错误的形式呈现。

整合后，运行 ESLint 时即可同时检查逻辑问题和格式问题。

Husky ：提交代码时的质量把控

从eslint --fix到Husky

一个优秀的团队，代码风格最好是保持一致的。很幸运的是，借助eslint --fix的代码修复功能，可以尽最大可能的保持代码一致。

eslint --fix 是 ESLint 提供的自动修复功能，比如，当我执行eslint --fix的修复功能时，代码中所有的格式相关问题都被自动修复了。

因此，保持代码规范的最佳方案就是：每个人在代码提交前都手动执行eslint --fix命令。

显然，这是不现实的，总有人会忘记执行或者故意不执行。这个时候，git提供的一些钩子函数就派上用场了，git官方提供了一些钩子函数，比如pre-commit，它可在代码提交前运行自定义脚本（比如执行eslint --fix命令）。

但是，git的原生钩子存在以下问题，操作起来很麻烦！

  • 难以共享：钩子保存在本地 .git/hooks 中，无法随代码版本控制共享。
  • 配置复杂：每个开发者需要手动添加和维护钩子。

这个时候，优秀的第三方工具库Husky 和 Lint-staged就出现了。

为什么使用 Husky 和 Lint-staged？

Husky 和 Lint-staged 是现代前端开发中常用的工具组合，用于在提交代码前进行检查和修复，确保代码质量并规范团队协作流程。

  1. Husky：用于在 Git 的生命周期事件（如 pre-commit、pre-push）中触发脚本操作。

    • 替代 Git 原生钩子，方便管理和配置。
    • 集成团队协作流程，减少低质量代码进入仓库。

  2. Lint-staged：专注于检查 Git 暂存区（staged） 的文件，避免对整个项目执行检查，提高效率。

    • 仅处理需要提交的文件，节约时间。
    • 可结合 ESLint、Prettier 等工具自动修复代码。

配置 Husky与Lint-staged

安装依赖

npm install husky lint-staged -D

初始化 Husky

npx husky install

这会在项目中生成 .husky/ 文件夹，并启用 Git 钩子功能。

  1. 添加 pre-commit 钩子：
npx husky add .husky/pre-commit "npx lint-staged"

这会创建 .husky/pre-commit 文件

内容如下：

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

npx lint-staged

为了保证其他人在第一次运行代码时，也能确保 Husky 钩子被启用，我们可以修改 package.json：

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

其作用是在项目安装依赖（执行 npm install 或 pnpm install 等命令）后，自动初始化和激活 Husky 钩子功能。

1、prepare 是 NPM 的一个特殊生命周期脚本，它会在以下场景自动执行：

-   安装依赖时（运行 `npm install`）。
-   发布包时（运行 `npm publish`）。

2、husky install 命令会在项目根目录生成一个 .husky/ 文件夹，用于存放所有 Git 钩子。

3、如果不添加 prepare 脚本，团队中的其他开发者在拉取代码后，需要手动运行 npx husky install 才能激活 Husky 钩子。通过 prepare，可以省略这一步。

配置 Lint-staged

在 package.json 中添加以下字段：


"lint-staged": {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.vue": ["eslint --fix", "prettier --write"],
  "*.css": ["stylelint --fix"],
  "*.md": ["prettier --write"]
}

上述的配置实现了针对不同文件类型运行不同的工具：

  • eslint --fix：自动修复 ESLint 能处理的问题。
  • prettier --write：自动格式化代码。
  • stylelint --fix（可选）：处理 CSS 样式问题。

代码提交效果

现在，当我们提交代码时，husky会帮我们执行git的git commit钩子，从而触发lint-staged，针对js,jsx,ts,tsx文件执行eslint --fix、prettier --write；针对.vue文件执行eslint --fix、prettier --write，以此类推。

执行git commit时的效果：

执行完毕的检查效果：

总结

通过以上工具的组合，代码规范化已不再是负担，而是开发流程中不可或缺的一部分。无论是开发者个人还是团队协作，这套从 ESLint 到 Husky 的一站式工具链，都能帮助你写出高质量、易维护的代码。

行了，就写这么多吧！

avatar
文章
阅读
粉丝