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-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).