在前端项目开发中，使用 eslint 进行代码规范和风格的检查是一个非常常见的做法。而在 Vue.js 项目中，@vue/cli-service 内置了 eslint-plugin-vue，用于检查 Vue.js 代码的风格规范。不过在实际项目中，可能会有一些业务或团队自定义的规则需要添加进 eslint 中，这时候就可以使用 @sharkykh/eslint-plugin-vue-extra npm 包来实现了。
安装
可以使用 npm 或者 yarn 进行安装，具体命令如下：
--- - --------------------------------- ----------
或者
---- --- --------------------------------- -----
配置
在项目中引入 @sharkykh/eslint-plugin-vue-extra 后，需要对 eslint 进行相应的配置。可以在 .eslintrc.js 文件中添加一个 plugins 字段，并将 @sharkykh/eslint-plugin-vue-extra 添加到其中：
-------------- - -
-------- -
----------------------
--
------ -
-------------------------------------------- --------
-- ---
--
--其中 rules 字段用于配置具体的规则。以 '@sharkykh/vue-extra/no-empty-event-method' 为例，它用于检查是否有没有实现的事件处理器：
-
-- ---
------ -
-------------------------------------------- --------
--
-具体的规则介绍可以参考 @sharkykh/eslint-plugin-vue-extra 的文档。
示例代码
可以通过以下示例代码了解如何使用 @sharkykh/eslint-plugin-vue-extra。
----------
-----
------- ----------------------------
------
----------------- ------- -
-------- -
----------- ---
--
--以上代码定义了一个空的 doNothing 方法，用于处理 button 的 click 事件。使用 @vue/cli-service 配置好 eslint 后，由于 @vue/eslint-plugin-vue 中没有对空的事件处理器进行规范校验，因此不会对其进行提示。
此时可以使用 @sharkykh/eslint-plugin-vue-extra 中的 no-empty-event-method 规则对其进行检测，在控制台中会输出如下警告信息：
---- ----- ----- ------- ----------- -- ------- --- ----- ---- -----------------------------------------
可以参考以上教程，为 Vue.js 项目添加自定义 eslint 规则，并在开发中提高代码质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067361890c4f7277584012