eslint-plugin-vue-scoped-css weekly downloads statistics

eslint-plugin-vue-scoped-css

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

<!-- [](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].

• Provides linting rules for Scoped CSS.
• Supports CSS syntax including level 4 selectors.
• Supports <style lang="scss">.
• Supports <style lang="stylus">.
• Parses <style>, <template> and <script> blocks.

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

If you use SCSS or STYLUS in your project, you also need to run:

• SCSS: npm install --save-dev postcss-scss
• Stylus: npm install --save-dev postcss-styl

Requirements

• ESLint v9.38.0 and above
• Node.js v20.19.x, v22.13.x, v24.x and above

<!--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['recommended'],
  {
    rules: {
      // override/add rules settings here, such as:
      // 'vue-scoped-css/no-unused-selector': 'error'
    }
  }
];

Configs

This plugin provides some predefined configs:

• *.configs['base'] - Settings and rules to enable this plugin
• *.configs['recommended'] - /base, plus rules for better ways to help you avoid problems for Vue.js 3.x
• *.configs['vue2-recommended'] - /base, plus rules for better ways to help you avoid problems for Vue.js 2.x
• *.configs['all'] - All rules of this plugin are included

Backward-compatible aliases

The following flat/* aliases are kept for backward compatibility:

• *.configs['flat/base'] → *.configs['base']
• *.configs['flat/recommended'] → *.configs['recommended']
• *.configs['flat/vue2-recommended'] → *.configs['vue2-recommended']
• *.configs['flat/all'] → *.configs['all']

<!--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['recommended'],
]
```…