如何创建拒绝使用 html 标签或 vue 组件的 eslint 规则？

Question

真实例子：

我们在我们的项目中使用 Vuetify。 我们有自定义组件

<q-dialog>

，它是 Vuetify 组件的包装器

<v-dialog>

。

我想拒绝使用

<v-dialog>

。

我该怎么做？

Answer 1

使用包装中的规则

vue/no-restricted-block

eslint-plugin-vue

。

如果您要限制的标签不是组件，请改用规则

vue/no-restricted-html-element

。配置方式相同。

{

  "vue/no-restricted-block": ["error", "v-dialog"],
  // or
  "vue/no-restricted-block": ["error", [
    {
      element: "v-dialog",
      message: "Do not use <v-dialog>. Use <q-dialog> instead."
    },
  ]],

  "vue/no-restricted-html-element": ["error", "button", "marquee"],
  // or
  "vue/no-restricted-html-element": ["error", [
    {"element": "button", "message": "Use of <button> is forbidden"},
    {"element": "marquee", "message": "Don't use <marquee>",
  ]],
}