How config Stylelint in vue3 app(vscode) to lint on save

Question

I want to lint my scss files and scss scope in .vue components. 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?

score 5 · Answer 1 · answered Dec 07 '21 at 18:19

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-recommended-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-recommended-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 comes in stylelint-config-standard-scss.

How config Stylelint in vue3 app(vscode) to lint on save

1 Answers1