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

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.
Documentation
See documents.
Installation
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
Usage
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 [
...eslintPluginVueScopedCSS.configs['flat/recommended'],
{
rules: {
}
}
];
Legacy Config (.eslintrc
)
Use .eslintrc.*
file to configure rules. See also: https://eslint.org/docs/latest/use/configure/.
Example .eslintrc.js:
module.exports = {
extends: [
'plugin:vue-scoped-css/vue3-recommended'
],
rules: {
}
}
Configs
This plugin provides some predefined configs:
New Config (eslint.config.js
)
*.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
Legacy Config (.eslintrc
)
plugin:vue-scoped-css/base
- Settings and rules to enable this plugin
plugin:vue-scoped-css/recommended
- /base
, plus rules for better ways to help you avoid problems for Vue.js 2.x
plugin:vue-scoped-css/vue3-recommended
- /base
, plus rules for better ways to help you avoid problems for Vue.js 3.x
plugin:vue-scoped-css/all
- All rules of this plugin are included
Rules
The --fix
option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
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"]
}
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"]
}
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"
}
}
Deprecated
- :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
- :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
Contributing
Welcome contributing!
Please use GitHub's Issues/PRs.
Development Tools
npm test
runs tests and measures coverage.
npm run update
runs in order to update readme and recommended configuration.
License
See the LICENSE file for license rights and limitations (MIT).