模板根只需要一个 element.eslint-plugin-vue - Html

当你使用 Element UI 组件库时，你会发现其提供了一些预定义的 HTML 标签来渲染它的组件。这样做的好处是可以避免在同一个页面上出现多个相同的 HTML 标签。然而，在某些情况下，你可能需要使用自定义的标签来更好地组织你的代码。

这时候，Element UI 提供了一个解决方案：element.eslint-plugin-vue。这个插件可以让你在 Vue 模板中使用任意数量的自定义标签而不必担心错误提示。接下来，我们将详细介绍如何使用这个插件。

安装

使用 NPM 进行安装：

npm install --save-dev eslint-plugin-vue

配置

在 .eslintrc 文件中添加以下配置：

{
  "plugins": [
    "vue"
  ],
  "extends": [
    "plugin:vue/recommended"
  ]
}

这里我们使用了 plugin:vue/recommended，这个配置包含了推荐的规则以及针对 Vue 的最佳实践。

另外，你可能也需要像下面这样设置 parserOptions：

{
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2017,
    "sourceType": "module"
  }
}

这样做是为了使 ESLint 能够正确地解析最新的 JavaScript 代码。

使用

现在你可以在 Vue 模板中使用任意数量的自定义标签了。例如，假设你想要定义一个名为 my-component 的组件：

<template>
  <my-component></my-component>
</template>

在这种情况下，如果你没有安装这个插件，你会收到一个错误提示，告诉你这个标签不存在。但是如果你安装了这个插件并按照上面的配置进行了设置，你就会看到没有错误提示了。

结论

element.eslint-plugin-vue 插件可以让你在使用 Element UI 组件库时更轻松地自定义标签。在这个过程中，我们了解了该插件的安装配置以及它的基本使用方式。