在前端开发中，代码规范是非常重要的环节。而 husky 和 lint-staged 是我们经常用来进行代码审查和格式化的工具。本文将详细介绍如何使用 @anireact/husky-config 包来帮助配置 husky 和 lint-staged。
安装
第一步是安装 npm 包。在命令行中输入以下命令：
npm install @anireact/husky-config --save-dev
配置
在 package.json 中添加如下配置：
-- -------------------- ---- -------
-
-------- -
-------- -
------------- --------------
----------- ---- -----
-
--
-------------- -
------- ------- -------
--------- ----------- ------- --------- ---------
-
-这里我们使用了 pre-commit 和 pre-push hook。pre-commit hook 在 commit 之前运行，而 pre-push hook 在 push 之前运行。在 husky 配置中，我们指定了 pre-commit hook 运行 lint-staged，而 pre-push hook 运行 npm test。
在 lint-staged 中，我们指定了所有的 .js 文件运行 eslint，所有的 .scss 文件运行 stylelint 和 prettier。通过这样分层的设置，我们可以对不同语言和工具进行不同的格式化和校验。
配置好后，我们在 commit 和 push 时都会自动运行代码审查和格式化了。
示例
我们在一个示例工程中演示如何使用 @anireact/husky-config 包来帮助进行代码审查和格式化。
创建一个空的文件夹并进入：
mkdir husky-test cd husky-test
初始化 npm：
npm init -y
安装需要的依赖：
npm install eslint stylelint husky lint-staged prettier @anireact/husky-config --save-dev
创建一个 .eslintrc.json 文件，配置 eslint 规则：
-- -------------------- ---- -------
-
---------- -----------------------
---------- ---
-------- -
------------- -----
--
---------------- -
-------------- --
------------- --------
--
------ -
------ -----
------- -----
---------- ----
-
-创建一个 .stylelintrc.json 文件，配置 stylelint 规则：
-- -------------------- ---- -------
-
-------- -
-------------- --
----------------- --------
----------------------- -----
---------------------------- ---------
-------------------------------- ---------
--------------------------------- --------
----------------- ------ ------ ---- ----- ------ -----
------------------------- -----
------------------ --
-------------------------------------------- -----
--------------------------------------- ---------
---------------------------------------- --------
------------------------------------ ---------
------------------------------------- ---------
------------------------------------------------- --
-------------------------------------------- ---------
---------------------------------- ---------
------------------------------------------- ---------
------------------------------------------ ---------
-------------------------------- -------
-
-在 package.json 中添加如下配置：
-- -------------------- ---- -------
-
-------- -
-------- -
------------- --------------
----------- ---- -----
-
--
-------------- -
------- ------- -------
--------- ----------- ------- --------- ---------
-
-在目录下新建一个 index.js 和 index.scss 文件，内容如下：
console.log('hello world')$primary-color: #f00;
在命令行中执行以下命令：
git init
然后回到 IDE 编辑 index.js 文件，并进行提交：
git add . git commit -m "Initial commit"
这时我们可以看到代码自动被格式化了， console.log 被自动去掉了。
我们来对 index.scss 文件进行格式化测试。把 $primary-color 值稍微改一下，如下所示：
$primary-color: #ff0000;
再次进行提交：
git add . git commit -m "Update scss"
这时我们可以看到 scss 文件也被自动格式化。
结论
通过使用 @anireact/husky-config 包，我们可以很方便地配置 husky 和 lint-staged 进行自动化的代码审查和格式化。而这样的规范化编码方式有利于提高代码质量，也有助于团队协作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/139281