We use Bootstrap-vue in our project, but we have a few files that extend the basic bootstrap component, e.g. <form-group> rather than Bootstrap-Vue's provided <b-form-group>.
I want to ensure that users use the <form-group> element only, and I don't want to have to read through PRs to see if they've accidentally forgotten. Is it possible to create an ES Lint rule that would flag up to a user that they should use <form-group> rather than <b-form-group>?
Thanks in advance!
You could overwrite the bootstrap component to throw when used?
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 );
Unfortunatly this does not answer the request of using ESLint for this. But it will ultimatly prevent the use of the component.
Another way could be to simply replace the bootstrap component with yours so that both can be used, but this may lead to confusion... You'd do this:
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 );