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

Question

我想在 .vue 组件中检查我的 scss 文件和 scss 范围。我在 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.