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

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-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: 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 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

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"]
}

Enforce all the rules in this category with:

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

or

{
 "extends": ["plugin:vue-scoped-css/recommended"]
}

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"
 }
}

• ⚠️ 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.

Welcome contributing!

Please use GitHub's Issues/PRs.

• npm test runs tests and measures coverage.
• npm run update runs in order to update readme and recommended configuration.

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