Home

Awesome

eslint-plugin-vue-scoped-css

eslint-plugin-vue-scoped-css is ESLint plugin for Scoped CSS in Vue.js.

NPM license NPM version NPM downloads NPM downloads NPM downloads NPM downloads NPM downloads Build Status Coverage Status

<!-- [![Greenkeeper badge](https://badges.greenkeeper.io/future-architect/eslint-plugin-vue-scoped-css.svg)](https://greenkeeper.io/) -->

Features

This ESLint plugin provides linting rules relate to better ways to help you avoid problems when using Scoped CSS in Vue.js.

You can check on the Online DEMO.

<!--DOCS_IGNORE_START-->

Documentation

See documents.

Installation

npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser

Requirements

<!--DOCS_IGNORE_END-->

Usage

<!--USAGE_SECTION_START--> <!--USAGE_GUIDE_START-->

New Config (eslint.config.js)

Use eslint.config.js file to configure rules. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.

Example eslint.config.js:

import eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css';
export default [
  // add more generic rule sets here, such as:
  // js.configs.recommended,
  ...eslintPluginVueScopedCSS.configs['flat/recommended'],
  {
    rules: {
      // override/add rules settings here, such as:
      // 'vue-scoped-css/no-unused-selector': 'error'
    }
  }
];

Legacy Config (.eslintrc)

Use .eslintrc.* file to configure rules. See also: https://eslint.org/docs/latest/use/configure/.

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue-scoped-css/vue3-recommended'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue-scoped-css/no-unused-selector': 'error'
  }
}

Configs

This plugin provides some predefined configs:

New Config (eslint.config.js)

Legacy Config (.eslintrc)

<!--USAGE_GUIDE_END--> <!--USAGE_SECTION_END-->

Rules

<!--RULES_SECTION_START-->

The --fix option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.

<!--RULES_TABLE_START-->

Recommended for Vue.js 3.x

Enforce all the rules in this category with:

export default [
  ...eslintPluginVueScopedCSS.configs['flat/recommended'],
]

or

{
  "extends": ["plugin:vue-scoped-css/vue3-recommended"]
}
Rule IDDescription
vue-scoped-css/enforce-style-typeenforce the <style> tags to be plain or have the scoped or module attribute
vue-scoped-css/no-deprecated-deep-combinatordisallow using deprecated deep combinators:wrench:
vue-scoped-css/no-parent-of-v-globaldisallow parent selector for ::v-global pseudo-element
vue-scoped-css/no-parsing-errordisallow parsing errors in <style>
vue-scoped-css/no-unused-keyframesdisallow @keyframes which don't use in Scoped CSS
vue-scoped-css/no-unused-selectordisallow selectors defined in Scoped CSS that don't use in <template>
vue-scoped-css/require-v-deep-argumentrequire selector argument to be passed to ::v-deep():wrench:
vue-scoped-css/require-v-global-argumentrequire selector argument to be passed to ::v-global()
vue-scoped-css/require-v-slotted-argumentrequire selector argument to be passed to ::v-slotted()

Recommended for Vue.js 2.x

Enforce all the rules in this category with:

export default [
  ...eslintPluginVueScopedCSS.configs['flat/vue2-recommended'],
]

or

{
  "extends": ["plugin:vue-scoped-css/recommended"]
}
Rule IDDescription
vue-scoped-css/enforce-style-typeenforce the <style> tags to be plain or have the scoped or module attribute
vue-scoped-css/no-parsing-errordisallow parsing errors in <style>
vue-scoped-css/no-unused-keyframesdisallow @keyframes which don't use in Scoped CSS
vue-scoped-css/no-unused-selectordisallow selectors defined in Scoped CSS that don't use in <template>

Uncategorized

No preset enables the rules in this category. Please enable each rule if you want.

For example:

{
  "rules": {
    "vue-scoped-css/no-deprecated-v-enter-v-leave-class": "error"
  }
}
Rule IDDescription
vue-scoped-css/no-deprecated-v-enter-v-leave-classdisallow v-enter and v-leave classes.
vue-scoped-css/require-selector-used-insidedisallow selectors defined that is not used inside <template>
vue-scoped-css/v-deep-pseudo-styleenforce :deep()/::v-deep() style:wrench:
vue-scoped-css/v-global-pseudo-styleenforce :global()/::v-global() style:wrench:
vue-scoped-css/v-slotted-pseudo-styleenforce :slotted()/::v-slotted() style:wrench:

Deprecated

Rule IDReplaced by
vue-scoped-css/require-scopedvue-scoped-css/enforce-style-type
<!--RULES_TABLE_END--> <!--RULES_SECTION_END--> <!--DOCS_IGNORE_START-->

Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

Development Tools

<!--DOCS_IGNORE_END-->

License

See the LICENSE file for license rights and limitations (MIT).