如何在 vue3 应用程序（vscode）中配置 Stylelint 以在保存时进行 lint

Question

我想整理我的 scss 文件和 scss scope in.vue 组件。 我在 stylelint.config 中的配置：

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

和 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",
  }
}

但它不起作用。 任何解决方案？

Answer 1

在使用 Stylelint 对 CSS 以外的任何内容进行 linting 时， 您需要使用customSyntax选项指定自定义语法。

但是，您可以扩展为您执行此操作的共享配置，而不是自己使用customSyntax选项：

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
  ]
}

stylelint-config-standard-scss和stylelint-config-recommended-vue共享配置将分别为 SCSS 和 Vue 文件配置 Stylelint。

您也不需要自己包含stylelint-scss插件，因为它也包含在stylelint-config-standard-scss中。