stylelint安装教程


一、安装依赖

依序安裝

1
2
3
4
5
npm install -D stylelint
npm install -D stylelint-config-standard
npm install -D stylelint-config-prettier
npm install -D stylelint-scss
npm install -D stylelint-order

一键安装

1
npm install -D stylelint stylelint-config-standard stylelint-config-prettier stylelint-scss stylelint-order

stylelint：运行工具
stylelint-config-standard：推荐配置
stylelint-config-prettier：防止与prettier规则冲突，将它放在extends数组的最后，可以覆盖prettier的配置
stylelint-scss：scss拓展，增加支持scss语法
stylelint-order：强制按照规定的顺序编写 css

二、配置规则

创建.stylelintrc.js文件，并写入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
module.exports = {
    extends: ["stylelint-config-standard", "stylelint-config-prettier"],
    plugins: ["stylelint-scss", "stylelint-order"],
    rules: {
        "order/properties-alphabetical-order": null,
        "order/properties-order": [
            // CSS属性顺序
        ],
        "color-hex-case": "lower",
        "color-hex-length": "short",
        "color-named": "never",
        "font-family-name-quotes": "always-where-recommended",
        "font-weight-notation": "numeric",
        "number-leading-zero": "always",
        "string-quotes": "double",
        "value-no-vendor-prefix": [
            true,
            {
                ignoreValues: [
                    "placeholder",
                    "input-placeholder",
                    "text-fill-color",
                    "line-clamp",
                    "box-orient",
                    "box"
                ]
            }
        ],
        "value-list-comma-newline-before": "never-multi-line",
        "value-list-comma-newline-after": "always-multi-line",
        "value-list-comma-space-before": "never",
        "value-list-comma-space-after": "always",
        "declaration-colon-newline-after": null,
        "declaration-bang-space-before": "always",
        "declaration-bang-space-after": "never",
        "declaration-colon-space-before": "never",
        "declaration-colon-space-after": "always",
        "declaration-empty-line-before": null,
        "declaration-block-semicolon-newline-before": "never-multi-line",
        "at-rule-no-unknown": null,
        "block-closing-brace-empty-line-before": [
            "never",
            {
                except: ["after-closing-brace"]
            }
        ],
        "block-closing-brace-newline-after": "always",
        "block-closing-brace-newline-before": "always",
        "block-opening-brace-newline-after": "always",
        "block-opening-brace-space-before": "always",
        "no-descending-specificity": [
            true,
            { ignore: ["selectors-within-list"] }
        ],
        "rule-empty-line-before": [
            "always",
            {
                ignore: ["after-comment", "first-nested"]
            }
        ],
        "block-no-empty": null
    }
};

rules 优先级大于 extends

CSS书写顺序

浏览器是根据 CSS 书写顺序将之按照 DOM 树的结构分布渲染样式，然后开始遍历每个树结点的 CSS 样式进行解析，在解析过程中，一旦发现某个元素的定位变化影响布局，则需要倒回去重新渲染。正确的书写顺序能让渲染引擎更高效的工作。

建议顺序如下：

  1. 影响文档流的属性
1
比如 position、left、top、right、bottom、z-index、display、float、clear、overflow 等
  1. 自身盒模型的属性
1
比如 margin、border、 padding、width、height 等

  1. 文字相关属性
1
比如 font、 line-height、text-align、text-indent、vertical-align 等
  1. 外观相关相关属性
1
比如 color、 background 等
  1. CSS3新增属性
1
比如 transition、 transform、animation 等
  1. 其他
1
比如 opacity、box-shadow、cursor 等

三、代码检测、修复

在package.json中配置script

1
2
"slint": "stylelint src/styles/**/*.scss src/**/*.vue",
"slint:fix": "stylelint src/styles/**/*.scss src/**/*.vue --fix"

执行命令：

1
2
npm run slint
npm run slint --fix

扩展资料：
stylelint规则列表