Description
Please describe what the rule should do:
It'd be nice if this plugin had a rule that disallowed certain classes being used. This is useful if you have some global CSS and you don't want its class selectors to be used accidentally, and it can be very helpful if you're migrating away from a lot of legacy CSS.
We're using a rule like this to help us migrate away from Bootstrap. As we remove usages of Bootstrap CSS classes, we forbid them to ensure that we don't re-introduce usages of them.
What category should the rule belong to?
[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)
Provide 2-3 code examples that this rule should warn about:
.eslintrc.json:
...
"rules": {
"vue/forbid-classes": ["error", {
"files": ["./.eslint/forbidden-classes.json"],
"classes": ["badClass"]
}],
...<div class="badClass" /><div :class="{ 'badClass': someBoolean }" /><div :class="someString + ' badClass'" /><div :class="`badClass ${someString}`" />Additional context
This rule has been very useful on our team already. Not only does it prevent us from introducing new usages of global CSS that we're phasing out, it also makes it quick and easy to find where we use those classes in the first place.