前言
前端开发的项目代码往往需要多人协作，而不同的人会有不同的代码风格和习惯，这样会导致代码的可读性和可维护性下降。为了解决这个问题，我们可以使用 ESLint 和 Husky 这两个工具来规范项目中的代码。
ESLint
ESLint 是一个开源的 JavaScript 代码检查工具，可以帮助我们检查代码中的语法错误、不规范的代码风格以及常见的代码漏洞等问题。ESLint 支持多种配置方式，可以根据项目的需求来进行配置。
安装
我们可以通过 npm 来安装 ESLint：
npm install eslint --save-dev
配置
在项目根目录下创建 .eslintrc.js 文件，然后在文件中进行配置，例如：
-- -------------------- ---- -------
-------------- - -
---- -
-------- -----
---- -----
--
-------- ---------------------
-------------- -
------------ -----
----------- ---------
--
------ -
------------- -------
-------------- -------
--
--上面的配置中，我们指定了代码运行的环境为浏览器环境和 ES6 环境，并且使用了 ESLint 推荐的规则。同时，我们还自定义了两个规则，禁止使用 console 和 debugger。
使用
在项目根目录下运行以下命令：
./node_modules/.bin/eslint yourfile.js
这样就可以对指定的文件进行代码检查了。
集成到编辑器中
我们可以将 ESLint 集成到编辑器中，以便在编写代码时自动进行代码检查。以 VS Code 为例，我们可以在编辑器中安装 ESLint 插件，并在用户设置中添加以下配置：
-- -------------------- ---- -------
-
---------------- -----
----------------- -
------------- --------------
--
------------- ---------
------------------ -
-------------
------------------
------
-------
-------------
-----------------
-
-这样，当我们在编辑器中编写代码时，就会自动进行代码检查了。
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 插件，并在用户设置中添加以下配置：
-- -------------------- ---- ------- - ---------------------------------- ------- ---------------------------------- ------- --------------------------- ----- ---------------------------- ----- ------------------------------------------ ------- ------------------------------ ------- ---------------- ----- ------------------------ ----- ------------------ ------ -------------------------- ----- -------------------------- ----- ------------------------------ ------ ------------------------- ------ ----------------------------- ----- -
这样，当我们在编辑器中进行代码提交时，就会自动进行代码检查了。
总结
通过使用 ESLint 和 Husky，我们可以规范前端项目中的代码，提高代码的可读性和可维护性。同时，我们还可以将这两个工具集成到编辑器中，以便在编写和提交代码时自动进行代码检查。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6587e765eb4cecbf2dd1a439