eslint-plugin-vue-scoped-css

Appearance

vue-scoped-css/no-unused-selector ​

disallow selectors defined in Scoped CSS that don't use in <template>

  • ⚙️ This rule is included in all of "plugin:vue-scoped-css/all", "plugin:vue-scoped-css/recommended" and "plugin:vue-scoped-css/vue3-recommended".

📖 Rule Details ​

This rule reports selectors defined in Scoped CSS not used in <template>.

This rule statically analyzes type selectors, ID selectors, class selectors, combinators and universal selectors among the selectors defined in CSS.

Now loading...

In order to match the root element with a class selector, you need to set at least one matching class name. This is a limitation of this rule. Without this limitation, the root element can apply all class selectors.

Now loading...
Now loading...

🔧 Options ​

json
{
  "vue-scoped-css/no-unused-selector": ["error", {
    "ignoreBEMModifier": false,
    "captureClassesFromDoc": [],
    "checkUnscoped": false,
    "extraClassAttributes": [],
  }]
}
  • ignoreBEMModifier ... Set true if you want to ignore the BEM modifier. Default is false.
  • captureClassesFromDoc ... Specifies the regexp that extracts the class name from the documentation in the comments. Even if there is no matching element, no error is reported if the document of a class name exists in the comments.
  • checkUnscoped ... The rule only checks <style scoped> by default, but if set to true it will also check <style> without the scoped attribute. If you set it to true, be very careful that the warned CSS may actually be used outside the .vue file.
  • extraClassAttributes ... Specifies an array of custom attribute names to check for class names in addition to the standard class attribute. Useful for frameworks that use custom attributes like hover-class, placeholder-class, etc. Default is an empty array.

"ignoreBEMModifier": true ​

Now loading...

"captureClassesFromDoc": [ "/(\\.[a-z-]+)(?::[a-z-]+)?\\s+-\\s*[^\\r\\n]+/i" ] ​

Example of KSS format:

Now loading...

"extraClassAttributes": ["hover-class", "placeholder-class"] ​

Now loading...

📚 Further reading ​

Implementation ​