Stylelint使用

Stylelint的作用是用于对样式代码进行格式化处理，在项目中创建.stylelintrc.js文件就可以使用了

说明：

1. 最新的版本去除了很多配置，比如缩进，这功能将不再提供，可用prettier来处理

这里顺带讲一下prettier的使用:

步骤一：vscode下载插件prettier

步骤二：项目根目录下配置.prettierrc.json的文件，js格式的文件可能会没效果

步骤三：设置为默认格式化处理，有eslint需要对eslint的格式进行覆盖

2. 配置文件添加拓展的配置，默认的配置不需要过多的配置了

 extends: [
    "stylelint-config-standard",
    "stylelint-config-standard-scss",
    "stylelint-config-recommended-scss",
    "stylelint-config-recommended-vue/scss",
    "stylelint-config-html/vue",
    "stylelint-config-recess-order" //扩展的顺序
  ],

下面是一套是除了拓展以外的插件，外加自定义的配置的文件：

order/properties-order配置项可以自定义样式的排列顺序，覆盖已有的顺序插件配置，其他的大家可以自行去官网上查阅 官网地址：Home | Stylelint

export default {
  root: true,
  // 继承推荐规范配置
  extends: [
    "stylelint-config-standard",
    "stylelint-config-standard-scss",
    "stylelint-config-recommended-scss",
    "stylelint-config-recommended-vue/scss",
    "stylelint-config-html/vue",
    "stylelint-config-recess-order" //扩展的顺序
  ],
  // plugins: [
  //   "stylelint-order"
  // ],
  // 指定不同文件对应的解析器
  overrides: [
    {
      files: ["src/**/*.{vue,html}"],
      customSyntax: "postcss-html",
    },
    {
      files: ["src/**/*.{css,scss}"],
      customSyntax: "postcss-scss",
    },
  ],
  // 自定义规则
  rules: {
    "declaration-property-unit-allowed-list": {
      "/^border/": ["px"],
      // "/^padding|^gap/": ["rem"]
    },
    // "unit-allowed-list": ["%", "deg", "px", "rem", "ms",'em'],
    // scss 变量名忽略警告
    "scss/dollar-variable-pattern": [/./, { "ignore": "global" }],
    // mixin变量名支持全部字符
    "scss/at-mixin-pattern": /.+/,
    "color-named": "never", //不能使用颜色名
    // "function-disallowed-list": ["rgb", "hwb", "lch"], //强制颜色函数只能用hsl
    "block-no-empty": true,
    "comment-no-empty": true,
    //限制id选择器的数量
    // "selector-max-id": 0,
    // 指定字符串使用单引号或双引号 "single"|"double"
    // "string-quotes": "single",
    // 颜色指定大写
    // "color-hex-case": "upper",
    // 指定导入CSS文件的方式("string"|"url")
    "import-notation": "string",
     // 选择器类名命名规则
    "selector-class-pattern": null,
    // 自定义属性命名规则
    "custom-property-pattern": null,
    // 动画帧节点样式命名规则
    "keyframes-name-pattern": null,
    // 允许无降序特异性
    "no-descending-specificity": null,
    // 允许 global 、export 、deep伪类
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["global", "export", "deep", "/./", "v-deep", '-webkit-'],
      },
    ],
    // 允许未知属性
    "property-no-unknown": [
      true,
      {
        ignoreProperties: ["menuBg", "menuText", "menuActiveText"],
      },
    ],
    'scss/at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['tailwind']
      }
    ],
    "declaration-property-value-no-unknown": true,
    "order/order": [
      "custom-properties",
      "declarations"
    ],
    "order/properties-order": [ //自定义顺序
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "justify-content",
      "align-items",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "font-size",
      "font-family",
      "font-weight",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ]
  },
};