前言
前端开发的项目代码往往需要多人协作，而不同的人会有不同的代码风格和习惯，这样会导致代码的可读性和可维护性下降。为了解决这个问题，我们可以使用 ESLint 和 Husky 这两个工具来规范项目中的代码。
ESLint
ESLint 是一个开源的 JavaScript 代码检查工具，可以帮助我们检查代码中的语法错误、不规范的代码风格以及常见的代码漏洞等问题。ESLint 支持多种配置方式，可以根据项目的需求来进行配置。
安装
我们可以通过 npm 来安装 ESLint：
npm install eslint --save-dev
配置
在项目根目录下创建 .eslintrc.js 文件，然后在文件中进行配置，例如：
// javascriptcn.com 代码示例
module.exports = {
env: {
browser: true,
es6: true,
},
extends: 'eslint:recommended',
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
rules: {
'no-console': 'warn',
'no-debugger': 'warn',
},
};上面的配置中，我们指定了代码运行的环境为浏览器环境和 ES6 环境，并且使用了 ESLint 推荐的规则。同时，我们还自定义了两个规则，禁止使用 console 和 debugger。
使用
在项目根目录下运行以下命令：
./node_modules/.bin/eslint yourfile.js
这样就可以对指定的文件进行代码检查了。
集成到编辑器中
我们可以将 ESLint 集成到编辑器中，以便在编写代码时自动进行代码检查。以 VS Code 为例，我们可以在编辑器中安装 ESLint 插件，并在用户设置中添加以下配置：
// javascriptcn.com 代码示例
{
"eslint.enable": true,
"eslint.options": {
"configFile": ".eslintrc.js"
},
"eslint.run": "onType",
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"html",
"typescript",
"typescriptreact"
]
}这样，当我们在编辑器中编写代码时，就会自动进行代码检查了。
Husky
Husky 是一个 Git Hook 工具，可以在 Git 操作前或后执行指定的命令。我们可以使用 Husky 来在代码提交前进行代码检查，以确保提交的代码符合规范。
安装
我们可以通过 npm 来安装 Husky：
npm install husky --save-dev
配置
在项目根目录下运行以下命令：
npx husky-init && npm install
这个命令会在项目中创建 .husky 文件夹，并在 package.json 中添加 Husky 的配置：
{
"husky": {
"hooks": {}
}
}然后，我们可以在 .husky 文件夹中创建一个 pre-commit 文件，用来定义代码提交前要执行的命令：
#!/bin/sh npm run lint
上面的命令表示在代码提交前先运行 npm run lint 命令，即进行代码检查。
使用
在项目根目录下运行以下命令：
npx husky install
这个命令会在 .git/hooks 文件夹中创建一个 pre-commit 的符号链接，指向我们在 .husky 文件夹中定义的 pre-commit 文件。
然后，我们就可以进行代码提交了。当我们执行 git commit 命令时，Husky 会先执行 pre-commit 文件中定义的命令，如果命令执行成功，则可以进行代码提交。
集成到编辑器中
我们可以将 Husky 集成到编辑器中，以便在代码提交时自动进行代码检查。以 VS Code 为例，我们可以在编辑器中安装 GitLens 插件，并在用户设置中添加以下配置：
// javascriptcn.com 代码示例
{
"gitlens.hovers.currentLine.over": "line",
"gitlens.hovers.annotations.over": "line",
"gitlens.codeLens.enabled": true,
"gitlens.statusBar.enabled": true,
"gitlens.views.repositories.files.layout": "list",
"gitlens.statusBar.alignment": "left",
"git.autofetch": true,
"git.enableSmartCommit": true,
"git.confirmSync": false,
"git.enableCommitSigning": true,
"git.decorations.enabled": true,
"gitlens.currentLine.enabled": false,
"gitlens.hovers.enabled": false,
"gitlens.blame.line.enabled": false
}这样，当我们在编辑器中进行代码提交时，就会自动进行代码检查了。
总结
通过使用 ESLint 和 Husky，我们可以规范前端项目中的代码，提高代码的可读性和可维护性。同时，我们还可以将这两个工具集成到编辑器中，以便在编写和提交代码时自动进行代码检查。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6587e765eb4cecbf2dd1a439