npm 包 @sharkykh/eslint-plugin-vue-extra 使用教程

在前端项目开发中，使用 eslint 进行代码规范和风格的检查是一个非常常见的做法。而在 Vue.js 项目中，@vue/cli-service 内置了 eslint-plugin-vue，用于检查 Vue.js 代码的风格规范。不过在实际项目中，可能会有一些业务或团队自定义的规则需要添加进 eslint 中，这时候就可以使用 @sharkykh/eslint-plugin-vue-extra npm 包来实现了。

安装

可以使用 npm 或者 yarn 进行安装，具体命令如下：

npm i @sharkykh/eslint-plugin-vue-extra --save-dev

或者

yarn add @sharkykh/eslint-plugin-vue-extra --dev

配置

在项目中引入 @sharkykh/eslint-plugin-vue-extra 后，需要对 eslint 进行相应的配置。可以在 .eslintrc.js 文件中添加一个 plugins 字段，并将 @sharkykh/eslint-plugin-vue-extra 添加到其中：

-- -------------------- ---- -------
-------------- - -
  -------- -
    ----------------------
  --
  ------ -
    -------------------------------------------- --------
    -- ---
  --
--

其中 rules 字段用于配置具体的规则。以 '@sharkykh/vue-extra/no-empty-event-method' 为例，它用于检查是否有没有实现的事件处理器：

{
  // ...
  rules: {
    '@sharkykh/vue-extra/no-empty-event-method': 'error',
  },
}

具体的规则介绍可以参考 @sharkykh/eslint-plugin-vue-extra 的文档。

示例代码

可以通过以下示例代码了解如何使用 @sharkykh/eslint-plugin-vue-extra。

<template>
  <div>
    <button @click="doNothing"></button>
  </div>
</template>

export default {
  methods: {
    doNothing() {},
  },
};

以上代码定义了一个空的 doNothing 方法，用于处理 button 的 click 事件。使用 @vue/cli-service 配置好 eslint 后，由于 @vue/eslint-plugin-vue 中没有对空的事件处理器进行规范校验，因此不会对其进行提示。

此时可以使用 @sharkykh/eslint-plugin-vue-extra 中的 no-empty-event-method 规则对其进行检测，在控制台中会输出如下警告信息：

  3:11  error  Event handler 'doNothing' is defined but never used  @sharkykh/vue-extra/no-empty-event-method

可以参考以上教程，为 Vue.js 项目添加自定义 eslint 规则，并在开发中提高代码质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067361890c4f7277584012