eslint-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
<style lang="scss">. - Supports
<style lang="stylus">. - Parses
<style>,<template>and<script>blocks.
You can check on the Online DEMO.
See documents.
npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parserRequirements
- 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: 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' } } ];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' } }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 🔧 below.
Enforce all the rules in this category with:
export default [ ...eslintPluginVueScopedCSS.configs['flat/recommended'], ]or
{ "extends": ["plugin:vue-scoped-css/vue3-recommended"] }| Rule ID | Description | |
|---|---|---|
| vue-scoped-css/enforce-style-type | enforce the <style> tags to be plain or have the scoped or module attribute | |
| vue-scoped-css/no-deprecated-deep-combinator | disallow using deprecated deep combinators | 🔧 |
| vue-scoped-css/no-parent-of-v-global | disallow parent selector for ::v-global pseudo-element | |
| vue-scoped-css/no-parsing-error | disallow parsing errors in <style> | |
| vue-scoped-css/no-unused-keyframes | disallow @keyframes which don't use in Scoped CSS | |
| vue-scoped-css/no-unused-selector | disallow selectors defined in Scoped CSS that don't use in <template> | |
| vue-scoped-css/require-v-deep-argument | require selector argument to be passed to ::v-deep() | 🔧 |
| vue-scoped-css/require-v-global-argument | require selector argument to be passed to ::v-global() | |
| vue-scoped-css/require-v-slotted-argument | require selector argument to be passed to ::v-slotted() |
Enforce all the rules in this category with:
export default [ ...eslintPluginVueScopedCSS.configs['flat/vue2-recommended'], ]or
{ "extends": ["plugin:vue-scoped-css/recommended"] }| Rule ID | Description | |
|---|---|---|
| vue-scoped-css/enforce-style-type | enforce the <style> tags to be plain or have the scoped or module attribute | |
| vue-scoped-css/no-parsing-error | disallow parsing errors in <style> | |
| vue-scoped-css/no-unused-keyframes | disallow @keyframes which don't use in Scoped CSS | |
| vue-scoped-css/no-unused-selector | disallow selectors defined in Scoped CSS that don't use in <template> |
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 ID | Description | |
|---|---|---|
| vue-scoped-css/no-deprecated-v-enter-v-leave-class | disallow v-enter and v-leave classes. | |
| vue-scoped-css/require-selector-used-inside | disallow selectors defined that is not used inside <template> | |
| vue-scoped-css/v-deep-pseudo-style | enforce :deep()/::v-deep() style | 🔧 |
| vue-scoped-css/v-global-pseudo-style | enforce :global()/::v-global() style | 🔧 |
| vue-scoped-css/v-slotted-pseudo-style | enforce :slotted()/::v-slotted() style | 🔧 |
⚠️ We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.- 😇 We don't fix bugs which are in deprecated rules since we don't have enough resources.
| Rule ID | Replaced by |
|---|---|
| vue-scoped-css/require-scoped | vue-scoped-css/enforce-style-type |
Welcome contributing!
Please use GitHub's Issues/PRs.
npm testruns tests and measures coverage.npm run updateruns in order to update readme and recommended configuration.
See the LICENSE file for license rights and limitations (MIT).