javascript - How config Stylelint in vue3 app(vscode) to lint on save - Stack Overflow

admin管理员组

文章数量:1022828

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

Share Improve this question Follow asked Dec 7, 2021 at 10:06 EhsanEhsan 8191010 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

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

Share Improve this question Follow asked Dec 7, 2021 at 10:06 EhsanEhsan 8191010 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptHow config Stylelint in vue3 app(vscode) to lint on saveStack Overflow