alfred-啊伍休息站-博客详情页

Stylelint

stylelint是一个强大、现代的检测工具，它可以帮助我们在样式中强制执行规范，减少错误。

我们使用Eslint和Prettier规范Js代码还不够，在前端项目中style样式也是重要的一部分，各式各样的样式代码格式不仅不容易阅读，也容易导致错误，所以需要使用Stylelint来规范样式代码。

demo源码

.stylelintrc.json最终配置

https://github.com/m-alfred/webpack5/blob/master/.stylelintrc.json

安装

yarn add --dev stylelint stylelint-config-standard

配置

stylelint支持以下格式配置文件

package.json中声明stylelint属性
.stylelintrc、.stylelintrc.json、.stylelintrc.yaml / .stylelintrc.yml、.stylelintrc.js
stylelint.config.js
stylelint.config.cjs

配置文件

.stylelintrc.json

{
  "extends": [
    "stylelint-config-standard"
  ]
}

rules

默认情况下未打开任何规则，也没有默认值。您必须明确配置每个规则才能将其打开。

rules是一个规则的键值对对象

{
  "rules": {
    "color-no-invalid-hex": true
  }
}

每个规则配置值可以是以下格式：

null(关闭规则)
单个值（基础配置）
一个数组包含两个元素，第一个元素为基础配置，第二个元素为扩展配置。

通过以下配置

关闭block-no-empty
开启comment-empty-line-before
开启max-empty-lines和unit-allowed-list

{
  "rules": {
    "block-no-empty": null,
    "comment-empty-line-before": [
      "always",
      {
        "ignore": ["stylelint-commands", "after-comment"]
      }
    ],
    "max-empty-lines": 2,
    "unit-allowed-list": ["em", "rem", "%", "s"]
  }
}

ignoreFiles

默认忽略node_modules目录举例，忽略所有js文件：

{
  "ignoreFiles": ["**/*.js"]
}

忽略代码

我们可以通过注释忽略代码块或者整个文件的stylelint规则。 https://stylelint.io/user-guide/ignore-code

忽略代码块

/* stylelint-disable */
a {}
/* stylelint-enable */

忽略单行

#id { /* stylelint-disable-line */
  color: pink !important; /* stylelint-disable-line declaration-no-important */
}

#id {
  /* stylelint-disable-next-line declaration-no-important */
  color: pink !important;
}

新增命令

package.json中添加

"lint:style": "stylelint --fix 'src/**/*.less'",

检测多个类型类型文件

"lint:style": "stylelint --fix 'src/**/*.{css,less}'",

扩展配置

使用stylelint-config-rational-order对style属性进行分组排序

yarn add --dev stylelint-order stylelint-config-rational-order

.stylelintrc.json

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-rational-order"
  ],
  "rules": {
    "order/order": [
      [
        {
          "type": "at-rule",
          "name": "import"
        },
        "dollar-variables",
        "at-variables",
        "custom-properties",
        "at-rules",
        "declarations",
        {
          "type": "at-rule",
          "name": "supports"
        },
        {
          "type": "at-rule",
          "name": "media"
        },
        "rules"
      ],
      {
        "severity": "warning"
      }
    ],
    "no-invalid-double-slash-comments": null,
    "no-descending-specificity": null,
    "no-empty-source": null,
    "property-no-vendor-prefix": [true, { "ignoreProperties": [
      "background-clip",
      "box-orient"
    ] }],
    "number-leading-zero": "never",
    "number-no-trailing-zeros": true,
    "value-list-comma-space-after": "always",
    "declaration-colon-space-after": "always",
    "value-list-max-empty-lines": 0,
    "shorthand-property-no-redundant-values": true,
    "declaration-block-no-duplicate-properties": true,
    "declaration-block-no-redundant-longhand-properties": true,
    "declaration-block-semicolon-newline-after": "always",
    "block-closing-brace-newline-after": "always",
    "media-feature-colon-space-after": "always",
    "media-feature-range-operator-space-after": "always",
    "at-rule-name-space-after": "always",
    "indentation": 2,
    "no-eol-whitespace": true,
    "string-no-newline": null
  }
}

rules中：

no-descending-specificity - 后代元素属性覆盖必须放置在元素样式后面
property-no-vendor-prefix - 样式值不得在浏览器前缀，可以通过第二个参数ignoreProperties设置白名单

配合vscode

vscode扩展中搜索@id:stylelint.vscode-stylelint，安装并启用。

该插件会使用当前工作区下的stylelint库
如果当前工作区不存在stylelint，则去查找全局的stylelint。
若全局stylelint也不存在，则会使用扩展内置的stylelint

常见问题

1. at-rules是什么

at-rule由一个@关键字和后续的一个区块组成，如果没有区块，则以分号结束。

@charset "utf-8"
@import "mystyle.css";
@media
@page
@counter-style
@fontface
@support

2. stylelint-order中order对应的类型

https://github.com/hudochenkov/stylelint-order/blob/48d983c7b0436a8fe4c1fbf0f79167664317a9ce/rules/order/README.md

custom-properties — Custom properties (e. g., --property: 10px;)
dollar-variables — Dollar variables (e. g., $variable)
at-variables — At-variables (e. g., @variable available in Less syntax)
declarations — CSS declarations (e. g., display: block)
rules — Nested rules (e. g., a { span {} })
at-rules — Nested at-rules (e. g., div { @media () {} })
less-mixins — Mixins in Less syntax (e. g., .mixin();)

3. 样式被覆盖

常出现在less的mixins上，mixins会被格式化自动放置到其他属性声明后面，导致其他属性被mixins中的属性覆盖

规则字典

1. stylelint

https://stylelint.io/user-guide/rules/list