CODEWITHSUNDEEP
javascriptvue.jsvuejs3stylelint
Ehsan
Ehsan

Reputation: 819

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

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?

Upvotes: 3

Views: 4900

Answers (1)

jeddy3
jeddy3

Reputation: 3959

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.

Upvotes: 5

Related Questions