stylelint配置使用
# stylelint 配置使用
# 安装 stylelint 和 Standard 规范
npm install --save-dev stylelint stylelint-config-standard stylelint-config-standard-scss postcss postcss-html postcss-sass stylelint-config-html
1
# 然后再根目录创建 .stylelintrc.js 文件, 并写下以下内容
{
"extends": [
"stylelint-config-standard",
"stylelint-config-standard-scss",
"stylelint-config-html/html",
"stylelint-config-html/vue",
],
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 在 package.json 文件的 scripts 加上命令, 规则检查自动修复css
"style": "stylelint \"src/**/*.(vue|scss|css)\" --fix",
1
# vscode配置
安裝 styleLint插件
在
settings.json文件设置，win+,快捷键可以快速打开
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
"stylelint.snippet": [
"css",
"less",
"postcss",
"vue",
"sass"
],
"stylelint.validate": [
"css",
"less",
"postcss",
"vue",
"sass"
],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 设置完之后，在vscode就可以有提示了，也保存自动修复了
# 自定义css属性顺序规则
除了使用设定默认的 standard 规则外，我们还可以在 .stylelintrc.js 内添加自己喜欢的规则
- 先安装
stylelint-order
npm install stylelint-order --save-dev
1
- 在
.stylelintrc.js设置代码如下
module.exports = {
"plugins": [
"stylelint-order"
],
"rules": {
"order/properties-order": [
"width",
"height"
]
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
先引入 plugins 插件， 在 order/properties-order 里面写css属性的先后顺序，
- 完整的
.stylelintrc.js如下
module.exports = {
"extends": [
"stylelint-config-standard",
"stylelint-config-standard-scss",
"stylelint-config-html/html",
"stylelint-config-html/vue",
],
"plugins": [
"stylelint-order"
],
"rules": {
// scss 变量名忽略警告
"scss/dollar-variable-pattern": [/./, {"ignore": "global"}],
// mixin变量名支持全部字符
"scss/at-mixin-pattern": /.+/,
// 类选择器的命名规则
"selector-class-pattern": ".",
// 指定字符串使用单引号或双引号 "single"|"double"
"string-quotes": "single",
// 颜色指定大写
"color-hex-case": "upper",
// 禁止空块
'block-no-empty': true,
// 颜色6位长度
"color-hex-length": "long",
// 兼容自定义标签名
"selector-type-no-unknown": [true, {
"ignoreTypes": []
}],
// 忽略伪类选择器 ::v-deep
"selector-pseudo-element-no-unknown": [true, {
"ignorePseudoElements": ["/./","v-deep", '-webkit-']
}],
// 禁止低优先级的选择器出现在高优先级的选择器之后。
"no-descending-specificity": null,
// 不验证@未知的名字，为了兼容scss的函数
"at-rule-no-unknown": null,
// 禁止空注释
"comment-no-empty": true,
// 禁止简写属性的冗余值
"shorthand-property-no-redundant-values": true,
"selector-pseudo-class-no-unknown": [true, {
"ignorePseudoClasses": ['/./', '-webkit-']
}],
// 禁止值的浏览器引擎前缀
"value-no-vendor-prefix": [true,
{
"ignoreValues": "box"
}],
// 禁止属性的浏览器引擎前缀
"property-no-vendor-prefix": [
true,
{
"ignoreProperties": [ /./]
}
],
// 禁止小于 1 的小数有一个前导零
"number-leading-zero": "never",
// 禁止空第一行
"no-empty-first-line": true,
// 属性的排序
"order/properties-order": [
"position",
"top",
"right",
"bottom",
"left",
"z-index",
"display",
"justify-content",
"align-items",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"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",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"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"
],
}
}
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
# 忽略stylelint对css的检验
- 忽略整个文件，在首行加入
/* stylelint-disable */
/* stylelint-disable */
html {}
1
2
2
- 忽略多行
/* stylelint-disable */
html {}
.div {
color: red;
}
/* stylelint-enable */
1
2
3
4
5
6
2
3
4
5
6
- 忽略一行， 在样式前加入
/* stylelint-disable-next-line */以忽略该行
#id {
/* stylelint-disable-next-line */
color: pink !important;
}
1
2
3
4
2
3
4
- 在
.stylelintrc.js內设定需要忽略的文件
{
ignoreFiles: ["dist/**/*", "src/assets/scss/abc.scss"]
}
1
2
3
2
3
stylelint 官网 (opens new window)
stylelint 中文文档 (opens new window)
编辑 (opens new window)