前言
在前端开发中，代码规范的重要性不言而喻。它可以提高代码的可读性、可维护性，减少出错率，提高开发效率等等。而在实际开发中，如何保证代码规范的执行呢？手动检查显然是不现实的，这时候就需要自动化代码检查工具的帮助了。本文将介绍如何在 ESLint 中通过 husky 和 lint-staged 进行自动化代码检查。
什么是 husky 和 lint-staged？
husky
husky 是一个 Git hook 工具，它可以让你在 Git 操作时执行一些自定义的脚本。比如，在代码提交之前自动运行代码检查，避免了不规范代码的提交。
lint-staged
lint-staged 是一个在 Git 操作时运行部分 ESLint 规则的工具。它可以让你在提交代码时只对被改动的文件进行 ESLint 检查，避免了不必要的全局检查。
如何配置 husky 和 lint-staged？
安装
在使用 husky 和 lint-staged 前，需要先安装它们。
npm install husky lint-staged --save-dev
配置 husky
在安装完 husky 后，需要在 package.json 文件中添加以下配置：
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}这段代码的意思是在执行 Git commit 命令时，会自动执行 lint-staged 命令。
配置 lint-staged
在安装完 lint-staged 后，需要在 package.json 文件中添加以下配置：
{
"lint-staged": {
"**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}
}这段代码的意思是对所有后缀为 .js 和 .vue 的文件执行 ESLint 检查，并自动修复一些常见的错误，然后将修改后的文件加入到 Git 提交中。
示例代码
下面是一个示例代码，该代码会检查一个数组中的数字是否都是偶数。
-- -------------------- ---- ------- ----- --- - --- -- -- --- -------- ----------- - ------ --- - - --- -- - -------- ---------- - ------ ------------------ - ------------------------
在上面的代码中，我们使用了一个自定义的函数 isEven 来判断一个数字是否是偶数，并在 check 函数中使用了 Array.prototype.every 方法来判断数组中的所有数字是否都是偶数。这段代码在使用 ESLint 进行检查时，会提示我们：
1:1 error Unexpected console statement no-console
这是因为在代码中使用了 console.log 语句，而在代码规范中，通常不允许在生产环境中使用 console 语句。为了自动修复这个错误，我们可以在 lint-staged 配置中添加 --fix 参数。
{
"lint-staged": {
"**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}
}这样，在执行 Git commit 命令时，就会自动修复这个错误，并将修改后的代码提交到 Git 中。
总结
通过 husky 和 lint-staged，我们可以在 Git 操作时自动执行代码检查，避免不规范代码的提交。这样可以提高代码的质量和可维护性，减少出错率，提高开发效率。在实际开发中，我们可以根据自己的需求来配置 husky 和 lint-staged，以达到最佳的使用效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d16d44add4f0e0ffa1deca