I want to lint my scss files and scss scope in .vue ponents. my config in stylelint.config:

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
    'stylelint-config-prettier',
    'stylelint-config-css-modules',
  ],
  plugins: [
    'stylelint-scss',
  ],
  rules: {},
}

and package.json:

{
  "scripts": {
    "lint:all:stylelint": "yarn lint:stylelint \"src/**/*.{vue,scss}\""
  },
  "devDependencies": {
    "stylelint": "^14.1.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recess-order": "^3.0.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-scss": "^4.0.0",
  }
}

but it doesn't work. any solution?

I want to lint my scss files and scss scope in .vue ponents. my config in stylelint.config:

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
    'stylelint-config-prettier',
    'stylelint-config-css-modules',
  ],
  plugins: [
    'stylelint-scss',
  ],
  rules: {},
}

and package.json:

{
  "scripts": {
    "lint:all:stylelint": "yarn lint:stylelint \"src/**/*.{vue,scss}\""
  },
  "devDependencies": {
    "stylelint": "^14.1.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recess-order": "^3.0.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-scss": "^4.0.0",
  }
}

but it doesn't work. any solution?

• javascript
• vue.js
• vuejs3
• stylelint

1 Answer 1

You need to specify a custom syntax using the customSyntax option when linting anything other than CSS with Stylelint.

However, rather than use the customSyntax option yourself, you can extend shared configs that do it for you:

module.exports = {
  extends: [
    'stylelint-config-standard-scss', // configure for SCSS
    'stylelint-config-remended-vue', // add overrides for .Vue files
    'stylelint-config-recess-order', // use the recess order for properties
    'stylelint-config-css-modules', // configure for CSS Modules methodology
    'stylelint-config-prettier' // turn off any rules that conflict with Prettier
  ]
}

The stylelint-config-standard-scss and stylelint-config-remended-vue shared configs will configure Stylelint for SCSS and Vue files, respectively.

You don't need to include the stylelint-scss plugin yourself either, as that also es in stylelint-config-standard-scss.