eslint-plugin-vue-scoped-css

3.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Error: Cannot find module 'postcss-scss' ↓

cause Missing optional peer dependency for SCSS parsing.

fix

npm install --save-dev postcss-scss

error Error: Failed to load config 'eslint-plugin-vue-scoped-css/recommended' ↓

cause Using legacy eslintrc config format with v3+ which only supports flat config.

fix

Use eslint.config.js with import plugin from 'eslint-plugin-vue-scoped-css'; ...plugin.configs['recommended']

error TypeError: plugin is not a function ↓

cause Incorrectly destructuring the default import.

fix

Use import plugin from 'eslint-plugin-vue-scoped-css' (default import), not named imports like { recommended }.

Warnings

breaking v3.0.0 drops support for legacy eslintrc configs and Node.js <20.19. ↓

fix Migrate to eslint.config.js flat config and upgrade Node.js to ^20.19.0 || ^22.13.0 || >=24.

deprecated Flat config aliases prefixed with 'flat/' (e.g., 'flat/base') are deprecated and will be removed in a future major version. ↓

fix Use unprefixed configs like 'base' or 'recommended' directly.

gotcha Missing optional peer deps (postcss-scss, postcss-styl) cause runtime errors when using SCSS or Stylus in components. ↓

fix Install the appropriate peer: npm install --save-dev postcss-scss (for SCSS) or postcss-styl (for Stylus).

Install

npm install eslint-plugin-vue-scoped-css

yarn add eslint-plugin-vue-scoped-css

pnpm add eslint-plugin-vue-scoped-css

Imports

default

wrong

const plugin = require('eslint-plugin-vue-scoped-css')

correct

import plugin from 'eslint-plugin-vue-scoped-css'

ESM-only since v3 – CommonJS require() is not supported.

configs

wrong

require('eslint-plugin-vue-scoped-css').configs['recommended']

correct

import plugin from 'eslint-plugin-vue-scoped-css'; plugin.configs['recommended']

Use bracket notation for named configs; flat configs under configs key.

rules

wrong

plugin.rules['no-unused-selector']

correct

import plugin from 'eslint-plugin-vue-scoped-css'; plugin.rules['vue-scoped-css/no-unused-selector']

Rule names are prefixed with 'vue-scoped-css/'.

Quickstart

Flat config example with recommended preset and custom rules.

// eslint.config.js
import plugin from 'eslint-plugin-vue-scoped-css';
export default [
  ...plugin.configs['recommended'],
  {
    rules: {
      'vue-scoped-css/no-unused-selector': 'error',
      'vue-scoped-css/no-deprecated-deep-combinator': 'warn'
    }
  }
];