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









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 .
- Supports .
- Parses , and blocks.
You can check on the Online DEMO.
See documents.
``bash`
npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser
> Requirements
>
> - ESLint v6.0.0 and above
> - Node.js v12.22.x, v14.17.x, v16.x and above
Use eslint.config.js file to configure rules. See also:
Example eslint.config.js:
`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'
}
}
];
Use .eslintrc.* file to configure rules. See also:
Example .eslintrc.js:
`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'
}
}
This plugin provides some predefined configs:
- *.configs['flat/base'] - Settings and rules to enable this plugin*.configs['flat/recommended']
- - /base, plus rules for better ways to help you avoid problems for Vue.js 3.x*.configs['flat/vue2-recommended']
- - /base, plus rules for better ways to help you avoid problems for Vue.js 2.x*.configs['flat/all']
- - All rules of this plugin are included
- plugin:vue-scoped-css/base - Settings and rules to enable this pluginplugin:vue-scoped-css/recommended
- - /base, plus rules for better ways to help you avoid problems for Vue.js 2.xplugin:vue-scoped-css/vue3-recommended
- - /base, plus rules for better ways to help you avoid problems for Vue.js 3.xplugin:vue-scoped-css/all
- - All rules of this plugin are included
The --fix option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
Enforce all the rules in this category with:
`js`
export default [
...eslintPluginVueScopedCSS.configs['flat/recommended'],
]
or
`json`
{
"extends": ["plugin:vue-scoped-css/vue3-recommended"]
}
| Rule ID | Description | |
|:--------|:------------|:---|
| vue-scoped-css/enforce-style-type | enforce the