Stylelint

Stylelint 与 CSS 的关系，就相当于 ESLint 与 JavaScript 的关系。Stylelint 是针对样式文件的代码审查工具。

Stylelint 参考文档

• 前端规范之CSS规范（Stylelint）

• 前端项目集成 stylelint

• Stylelint 用户指南 规则配置

VSCode 安装 Stylelint 插件

VSCode Stylelint 插件安装地址：

marketplace.visualstudio.com/items?itemN…

VSCode settings.json 文件

{
  // 保存时自动修复eslint、stylelint提示的问题
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
  },

  // 开启stylelint校验的基础配置
  "stylelint.validate": ["css", "scss", "vue"],
  "stylelint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
}

package.json 文件

{
  "devDependencies": {
    "stylelint": "^9.10.1",
    "stylelint-config-css-modules": "^1.3.0",
    "stylelint-config-prettier": "^5.0.0",
    "stylelint-config-rational-order": "^0.1.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
    "stylelint-order": "^5.0.0",
  }
}

.stylelinttrc.js 文件

module.exports = {
  "extends": [
    "stylelint-config-standard", // stylelint的推荐配置
    "stylelint-config-css-modules", // css-module的方案来处理样式文件
    // "stylelint-config-rational-order",  // 属性排序规则配置（rules中使用自定义排序）
    "stylelint-config-prettier", // 结合prettier使用
  ],
  "plugins": [
    "stylelint-order", // 对CSS属性进行排序的插件
    "stylelint-declaration-block-no-ignored-properties", // 对css代码检测无效的属性的插件
  ],
  "rules": {
    "color-hex-case": ['lower'], // 指定十六进制颜色的大小写
    "no-descending-specificity": true, // 禁止低优先级的选择器出现在高优先级的选择器之后。
    "selector-type-no-unknown": null, // 禁用未知的类型选择器。
    "font-family-no-missing-generic-family-keyword": null, // 字体系列不缺少通用系列关键字
    "comment-empty-line-before": ['never'], // 要求或禁止在注释之前有空行。
    "unit-no-unknown": [true, {"ignoreUnits": ["upx", "rpx"]}], // 禁止使用未知单位。
    "at-rule-no-unknown": [true, {"ignoreAtRules": ["mixin", "include", "extend", "while", "each", "if", "else", "function", "return"]}], // 禁止使用未知的 at 规则。
    // 指定声明块内属性的字母顺序
    'order/properties-order': [
      "content",
      "position", "top", "right", "bottom", "left", "z-index",
      "float", "clear",
      "display", "overflow", "overflow-x", "overflow-y", "-webkit-overflow-scrolling", "visibility", "clip",
      "flex-flow", "flex-direction", "flex-wrap",
      "justify-content", "align-items", "align-content",
      "order", "flex", "flex-grow", "flex-shrink", "flex-basis", "align-self",
      "box-sizing",
      "width", "min-width", "max-width",
      "height", "min-height", "max-height",
      "padding",  "padding-top", "padding-right", "padding-bottom", "padding-left",
      "border", "border-spacing", "border-collapse", "border-width", "border-style", "border-color",
      "border-top", "border-top-width", "border-top-style", "border-top-color",
      "border-right", "border-right-width", "border-right-style", "border-right-color",
      "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color",
      "border-left", "border-left-width", "border-left-style", "border-left-color",
      "border-radius", "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius",
      "border-image", "border-image-source", "border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat",
      "outline", "outline-width", "outline-style", "outline-color", "outline-offset",
      "margin",  "margin-top", "margin-right", "margin-bottom", "margin-left",
      "font", "font-family", "font-size", "line-height", "font-weight", "font-style", "font-variant", "font-stretch", "font-size-adjust",
      "letter-spacing", "word-spacing",
      "text-align", "vertical-align", "text-indent", "text-transform",
      "text-decoration", "text-shadow", "text-overflow",
      "white-space", "word-break", "word-wrap",
      "color",
      "background",
      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
      "background-color", "background-image", "background-repeat", "background-position", "background-position-x", "background-position-y",
      "background-attachment", "background-size", "background-clip", "background-origin",
      "box-shadow",
      "opacity",
      "cursor",
      "table-layout", "caption-side", "empty-cells",
      "list-style", "list-style-position", "list-style-type", "list-style-image",
      "pointer-events",
      "transform", "transform-origin", "transform-style", "perspective", "perspective-origin", "backface-visibility",
      "transition", "transition-property", "transition-duration", "transition-timing-function", "transition-delay",
      "animation", "animation-name", "animation-duration", "animation-timing-function", "animation-delay", "animation-iteration-count", "animation-direction", "animation-play-state", "animation-fill-mode",
      "-webkit-appearance",
      "-webkit-tap-highlight-color",
    ],
  }
}