前端项目的代码质量对于项目的可维护性和扩展性至关重要，而通过工具自动检查代码的规范性则是保持代码质量不可缺少的一部分。在实际的开发中，我们可以通过使用 ESlint 和 Husky 工具来达到自动化检查的目的。
ESLint 概述
ESLint 是一个开源的 JavaScript 代码检查工具，可以用来检查语法、变量命名规则、代码风格等等方面的规范。ESLint 可以在实时编辑器中提供自动检查，并且可以集成到自动化构建工具中，进行代码检查。下面是一个简单的 ESLint 配置文件示例：
-- -------------------- ---- -------
-
------ -
---------- -----
----------- -----
------ ----
--
---------- ---------------------
---------------- -
------------- ---------
-------------- ----
--
-------- -
------------- ------
--------- --------- ---
------------------ --------- --------
--------- --------- ----------
------- --------- ---------
-
-在上述配置文件中，我们可以设置环境变量、ESlint 的扩展规则以及定制一些检查规则，达到对代码进行检查的目的。
Husky 概述
Husky 是一个 Git 钩子管理器，可以用来在提交代码之前执行一些预定制的命令，如代码检查、单元测试等。在实际开发中，我们可以配置 Husky，使其在提交代码之前执行 ESlint 命令，达到自动校验代码的目的。
如何配置 ESlint 和 Husky
在项目中使用 ESlint 和 Husky，我们需要进行如下配置：
1. 安装 ESlint
npx eslint --init
执行上述命令，会出现一系列的配置问题，可根据自己的项目情况进行选择。之后就可以将生成的配置文件存储到项目的根目录下。
2. 安装 husky 和 commitlint
npm i husky -D npm i commitlint -D npm i @commitlint/config-conventional @commitlint/cli -D
3. 生成 commitlint 配置文件
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js4. 在 package.json 中配置
{
"husky": {
"hooks": {
"pre-commit": "eslint src/**/*.js",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}在上述配置中，我们设置了一个 pre-commit 钩子来执行 ESlint 检查，同时还有一个 commit-msg 钩子用来执行 commitlint 校验 commit message 的规范性。
总结
通过配置 ESlint 和 Husky，我们可以在提交代码之前自动校验代码的规范性和 commit message 的规范性，避免低质量的代码和错误的 commit message 提交。虽然这需要在前期做出一定的配置工作，但是在后续的开发中可以为项目带来不小的便利和加分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c04d3e9e06631ab9cb8c3d