javascript - 如何在 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

You need to specify使用 customSyntax option 的自定义语法当使用 Stylelint 对 CSS 以外的任何内容进行 linting 时。

但是，与其自己使用 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 中。