Stylelint是一个强大的，现代的代码检查工具，与ESLint类似，Stylelint能够通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误。

    目前在开源社区上，关于CSS Lint的解决方案主要包括了csslint、SCSS-Lint和Stylelint等几种。而由于Stylelint在技术架构上基于AST 的方式扩展CSS，除原生CSS 语法，其也支持 SCSS、Less 这类预处理器，并且也有非常多的第三方插件，因此我们团队选择了Stylelint作为CSS Lint工具。

    官方文档：stylelint.io/

一、css代码校验工具

1、安装

a、安装命令

pnpm add stylelint -D
pnpm add stylelint-scss -D
pnpm add stylelint-order  -D
pnpm add stylelint-config-standard  -D
pnpm add stylelint-config-standard-vue -D
pnpm add stylelint-config-prettier  -D
pnpm add stylelint-config-recommended-scss -D
pnpm add postcss  -D
pnpm add postcss-scss -D
pnpm add postcss-html -D

或者

pnpm add stylelint stylelint-scss stylelint-order stylelint-config-standard stylelint-config-standard-vue stylelint-config-prettier stylelint-config-recommended-scss postcss postcss-scss postcss-html -D

b、依赖说明

依赖名称	说明	官网文档
stylelint	css样式lint工具	stylelint.io
stylelint-scss	特定于SCSS语法的规则	github.com/shellscape/…
stylelint-order	CSS属性排序	github.com/hudochenkov…
stylelint-config-standard	stylelint的推荐配置	github.com/stylelint/s…
stylelint-config-standard-vue	lint.vue文件的样式配置	github.com/ota-meshi/s…
stylelint-config-prettier	关闭所有不必要或可能与Prettier冲突的规则	github.com/prettier/st…
stylelint-config-recommended-scss	less的推荐可共享配置规则	github.com/ssivanatara…
postcss	转换css代码工具	www.postcss.com.cn/
postcss-scss	识别scss语法	github.com/ssivanatara…
postcss-html	识别html/vue 中的<style></style>标签中的样式	github.com/gucong3000/…

2、配置.stylelintrc文件

{
// 可以扩展现有配置（无论是自己的配置还是第三方配置
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
    "stylelint-config-recommended-less",
    "stylelint-config-standard-vue"
  ],
  // 插件是社区构建的规则或规则集，支持方法，工具集，非标准 CSS功能或非常特定的用例
  "plugins": ["stylelint-order"],
  "overrides": [
    {
      "files": ["**/*.(scss|css|vue|html)"],
      "customSyntax": "postcss-scss"
    },
    {
      "files": ["**/*.(html|vue)"],
      "customSyntax": "postcss-html"
    }
  ],
  // 忽略特定文件，node_modules 是默认情况下忽略的目录
  "ignoreFiles": [
    "**/*.js",
    "**/*.jsx",
    "**/*.tsx",
    "**/*.ts",
    "**/*.json",
    "**/*.md",
    "**/*.yaml"
  ],
  // 默认情况下未打开任何规则，也没有默认值。必须明确配置每个规则才能将其打开
  "rules": {
    "no-descending-specificity": null,
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": ["v-deep"]
      }
    ],
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["deep"]
      }
    ],
 // 指定声明块内属性的字母顺序
    "order/properties-order": [
      "position",
      "top",
      "left",
      "right",
      "bottom",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-family",
      "font-size",
      "font-weight",
      "font-synthesis",
      "line-height",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "color-scheme",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-radius",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition",
      "overflow",
      "overflow-x",
      "overflow-y",
      "z-index"
    ]
  }
}

3、配置 .stylelintignore文件

node_modules
dist

4、在 package.json中添加scrips脚本

// --fix表示自动修复Stylelint错误
"lint:style": "stylelint 'src/**/*.{css,scss,vue,html}' --fix"