vscode配置添加styleLint

1. 安装依赖

npm install stylelint-scss sass stylelint -D

yarn add stylelint-scss sass stylelint -D

Stylelint 14+ 不再包含 Scss，Sass,Less或者SugarSS这种类css的预编译器的解析了

为了然 stylelint 能够读 vue (.html, .xml, .svelte, .vue etc.)文件，我们还需要安装postcss-html

安装postcss-html stylelint-config-standard-scss

npm install postcss-html stylelint-config-standard-scss -D
yarn add postcss-html stylelint-config-standard-scss -D

2. 添加.stylelintrc.js

module.exports = {
  extends: "stylelint-config-sass-guidelines",
  "customSyntax": "postcss-html",
  rules: {
    "selector-max-id": 2,
    "at-rule-no-unknown": [true, { ignoreAtRules: ["include", "mixin","forward", "use",/^box-/] }],
    "selector-max-compound-selectors": 4, // 允许伪类嵌套4层
    "max-nesting-depth": [
      4,
      {
        ignore: ["pseudo-classes", "blockless-at-rules"]
      }
    ],
    "selector-class-pattern": null, // 允许下划线以及其他类型 __
    "declaration-property-value-disallowed-list": {
      "unprefixed-property-name": ["/^border/", "^color",] //允许样式覆盖
    },
    "scss/dollar-variable-pattern": [/^$/, {"ignore": "global"}],
    "no-empty-source": null, // 可以空内容
    "scss/double-slash-comment-whitespace-inside": null, // 注释问题
    "selector-pseudo-class-no-unknown": [true, { ignorePseudoClasses: ["deep"] }] //忽略未知的伪类选择器 
  }
};

3. vscode安装 Stylelint插件

4. 配置vscode

"stylelint.validate": ["css", "less", "scss", "vue", "sass"],