是否有可能创建一个自定义esLint规则，在使用特定组件时警告用户？

Question

我们在我们的项目中使用引导-Vue，但是我们有一些文件扩展了基本的引导组件，例如<form-group>，而不是Bootstrap-vue提供的<b-form-group>。

我希望确保用户只使用<form-group>元素，并且我不想通过读取PRs来查看他们是否意外地忘记了。是否可以创建ES规则，标记为用户应该使用<form-group>而不是<b-form-group>？

提前感谢！

Answer 1

您可以在使用时覆盖要抛出的引导程序组件吗？

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'  
Vue.use(BootstrapVue);

const Base = Vue.options.components["b-form-group"];
const DeprecatedForm = Base.extend({
  methods: {
    beforeCreate() {
      throw new Error("[DEPRECATED] 'b-form-group' should not be used, prefer using 'form-group'");
    },
  })
}

Vue.component('b-form-group', DeprecatedForm );

不幸的是，这没有响应使用ESLint的请求。但它将最终防止组件的使用。

另一种方法可以是简单地将引导组件替换为您的组件，以便两者都可以使用，但这可能会导致混淆……你会这样做：

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'  
Vue.use(BootstrapVue);

const Base = Vue.options.components["form-group"];
// I think we need to create a new component, maybe not?
const Form= Base.extend({});
Vue.component('b-form-group', DeprecatedForm );