在前端开发中，有很多代码规范需要遵守，例如命名规范、缩进规范、代码风格规范等等。这些规范让代码更加易读易懂、易维护，并且有利于团队协作。但是在实际开发过程中，由于时间紧迫或者个人习惯等原因，有时候可能会忽略掉这些规范。
如果你想要在开发过程中自动化检查这些规范是否被遵守，可以使用 npm 包 @gik/tools-checker。这个包可以实现对 JavaScript、TypeScript、CSS、Less、Sass、Vue 和 React 等文件进行自动化规范检查。
安装 @gik/tools-checker
安装 @gik/tools-checker 很简单，只需要在终端运行以下命令：
npm install --save-dev @gik/tools-checker
配置 @gik/tools-checker
安装完成后，还需要在项目中配置 @gik/tools-checker。可以在项目的根目录下创建一个名为 ".checkerrc.json" 的文件，写入以下配置：
-- -------------------- ---- -------
-
-------------- --------------------
---------- -
-
------- ------------------------
------ ------- ------- ----- ----------------- ----- --
--
-
------- -----------------------------
------ ---------- ------- ------------------- ----- --
--
-
------- --------------
------ ---------------- ---- ----- --
--
-
------- ---------------
------ --------- ---------- ---------------------------------------------- --
-
-
-这是一个基本的配置，可以根据自己的需求进行修改。其中，"ignoreFiles" 指定忽略的文件路径，"targets" 指定对哪些文件进行检查，"test" 指定文件类型的正则表达式，"cmd" 指定执行检查的命令，其中 "--fix" 表示自动修复检查项。
如果你需要使用 HTMLhint 规则，可以在项目的根目录下创建另一个名为 ".htmlhintrc.json" 的文件，并在该文件中添加 HTMLhint 规则配置，例如：
{
"rules": {
"gik-template-tag-spacing": true
}
}运行 @gik/tools-checker
当配置完成后，运行以下命令即可进行规范检查：
npx checkerrc
如果不想每次都输入这个命令，可以在 package.json 文件的 scripts 字段中添加一个名为 "check" 的脚本：
{
"scripts": {
"check": "checkerrc"
}
}这样就可以使用以下命令进行规范检查了：
npm run check
示例代码
下面是一些示例代码，可以演示 @gik/tools-checker 的使用方式：
JavaScript
-- -------------------- ---- -------
-- ---
-------- -------- -
------ ----
-
-- ----
-------- ------ -- -
------ - - --
-CSS
-- -------------------- ---- ------- -- --- -- -------------------------------------------------- ------ -- ---- -- ----- - -------- ------ ----------- ----------- ------- - ----- -
Vue
-- -------------------- ---- -------
----------
-----
-- ------- --
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------ ------
-
-
-
---------
------ -------
-- --- --
---------
----------
-
-- ---- --
-------- -
------ ----
-
--------HTML
<!-- bad --> <div id="mm" class="aa">bad</div> <!-- good --> <div id="mm" class="aa">good</div>
总结
使用 @gik/tools-checker 可以让前端开发人员在开发过程中自动化检查代码规范是否被遵守，并且可以自动修复检查项。这个工具可以提高代码的质量和易读性，有利于团队协作和项目维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668881e8991b448e2c24