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

967 阅读8分钟

前言

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

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

本文将以 ESLintHusky 为核心,逐步搭建一套高效的代码规范体系,同时整合 Prettierlint-stagedVS 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:对象或数组多行时尾逗号的处理方式(nonees5all)。
  • 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?

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


  1. Husky:用于在 Git 的生命周期事件(如 pre-commitpre-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时的效果:

执行完毕的检查效果:

总结

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

行了,就写这么多吧!