{"id":19979,"library":"eslint-plugin-vue-scoped-css","title":"eslint-plugin-vue-scoped-css","description":"ESLint plugin providing linting rules for scoped CSS in Vue.js components. Current stable version is 3.0.0, released in 2025, with active maintenance and regular releases (major every ~2 years). It supports CSS Level 4 selectors, SCSS (via postcss-scss), and Stylus (via postcss-styl), parsing <style>, <template>, and <script> blocks. Key differentiators: dedicated scoped CSS rules (e.g., no-unused-selector, no-deprecated-deep-combinator), built-in TypeScript types, and flat config support (ESLint >=9.38.0). Unlike generic CSS linting plugins, it understands Vue's scoped attributes and deep selectors.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/future-architect/eslint-plugin-vue-scoped-css","tags":["javascript","eslint","eslintplugin","eslint-plugin","vue","style","scoped","css","typescript"],"install":[{"cmd":"npm install eslint-plugin-vue-scoped-css","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-vue-scoped-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-vue-scoped-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency – plugin runs inside ESLint","package":"eslint","optional":false},{"reason":"peer dependency – parses Vue SFCs","package":"vue-eslint-parser","optional":false},{"reason":"optional peer – required for SCSS support","package":"postcss-scss","optional":true},{"reason":"optional peer – required for Stylus support","package":"postcss-styl","optional":true}],"imports":[{"note":"ESM-only since v3 – CommonJS require() is not supported.","wrong":"const plugin = require('eslint-plugin-vue-scoped-css')","symbol":"default","correct":"import plugin from 'eslint-plugin-vue-scoped-css'"},{"note":"Use bracket notation for named configs; flat configs under configs key.","wrong":"require('eslint-plugin-vue-scoped-css').configs['recommended']","symbol":"configs","correct":"import plugin from 'eslint-plugin-vue-scoped-css'; plugin.configs['recommended']"},{"note":"Rule names are prefixed with 'vue-scoped-css/'.","wrong":"plugin.rules['no-unused-selector']","symbol":"rules","correct":"import plugin from 'eslint-plugin-vue-scoped-css'; plugin.rules['vue-scoped-css/no-unused-selector']"}],"quickstart":{"code":"// eslint.config.js\nimport plugin from 'eslint-plugin-vue-scoped-css';\nexport default [\n  ...plugin.configs['recommended'],\n  {\n    rules: {\n      'vue-scoped-css/no-unused-selector': 'error',\n      'vue-scoped-css/no-deprecated-deep-combinator': 'warn'\n    }\n  }\n];\n","lang":"javascript","description":"Flat config example with recommended preset and custom rules."},"warnings":[{"fix":"Migrate to eslint.config.js flat config and upgrade Node.js to ^20.19.0 || ^22.13.0 || >=24.","message":"v3.0.0 drops support for legacy eslintrc configs and Node.js <20.19.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use unprefixed configs like 'base' or 'recommended' directly.","message":"Flat config aliases prefixed with 'flat/' (e.g., 'flat/base') are deprecated and will be removed in a future major version.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Install the appropriate peer: npm install --save-dev postcss-scss (for SCSS) or postcss-styl (for Stylus).","message":"Missing optional peer deps (postcss-scss, postcss-styl) cause runtime errors when using SCSS or Stylus in components.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev postcss-scss","cause":"Missing optional peer dependency for SCSS parsing.","error":"Error: Cannot find module 'postcss-scss'"},{"fix":"Use eslint.config.js with import plugin from 'eslint-plugin-vue-scoped-css'; ...plugin.configs['recommended']","cause":"Using legacy eslintrc config format with v3+ which only supports flat config.","error":"Error: Failed to load config 'eslint-plugin-vue-scoped-css/recommended'"},{"fix":"Use import plugin from 'eslint-plugin-vue-scoped-css' (default import), not named imports like { recommended }.","cause":"Incorrectly destructuring the default import.","error":"TypeError: plugin is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}