eslint-plugin-vue-scoped-css

Appearance

vue-scoped-css/require-selector-used-inside ​

disallow selectors defined that is not used inside <template>

  • ⚙️ This rule is included in "plugin:vue-scoped-css/all".

📖 Rule Details ​

This rule reports the defined selectors is not used inside <template>.

Similar to the vue-scoped-css/no-unused-selector rule, with differences. This rule requires elements that matches the first selector be included in <template>.

Now loading...

🔧 Options ​

json
{
  "vue-scoped-css/require-selector-used-inside": ["error", {
    "ignoreBEMModifier": false,
    "captureClassesFromDoc": [],
    "checkUnscoped": false
  }]
}
  • 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.

"ignoreBEMModifier": true ​

Now loading...

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

Example of KSS format:

Now loading...

📚 Further reading ​

Implementation ​