Stylelint样式规范工具
# # Stylelint样式规范工具
笔者近期做代码优化，其中就重要的一块就是代码规范。之前的文章写过ESLint，用来规范js写法，现在使用StyleLint来规范css写法。
- 安装和使用
- 添加例外
- 自动修复
# # 1. 安装和使用
# # 安装
npm install --save-dev stylelint
1
2
2
# # 使用
新增
.stylelintrc文件在文件中设置规则，文末附上笔者部门使用的css规范
# # 规则检查
stylelint 'src/**/*.vue' --fix
1
2
2
stylelint命令有时候无法解析到，因为使用了全局的sylelint，这时可以指定相对路径
./node_modules/.bin/stylelint
# # 提交git时检查
需要用到插件husky,该插件会在git提交时，执行npm run precommit命令，所以需要在package.json中添加如下代码检查：
"lint": "eslint --quiet --ext .js,.vue src",
"style": "stylelint 'src/**/*.vue' --fix",
"precommit": "npm run lint && npm run style",
1
2
3
4
2
3
4
# # 2. 添加例外
在stylelint使用过程中，有时候会对某条css添加例外，不要适用规则或部分规则
# # 关闭全部规则：
/* stylelint-disable */
a {}
/* stylelint-enable */
1
2
3
4
2
3
4
# # 关闭部分规则：
/* stylelint-disable selector-no-id, declaration-no-important */
#id {
color: pink !important;
}
/* stylelint-enable */
1
2
3
4
5
6
2
3
4
5
6
# # 3. 自动修复
有些项目是开发到一半时，添加了StyleLint进行css约束，这时候需要自动化对不满足条件的Rule进行修复，如下是使用到的几种：
1.--fix命令
该命令能fix大部分格式问题，具体哪些规则可以自动fix可以看这里 (opens new window) (opens new window)
2.Vetur插件--格式化文件
优点是可以统一格式化文件，缺点是只能单个文件操作
3.vscode-stylefmt插件
类似Vetur插件，但该插件可定制化更多，详情请移至github (opens new window) (opens new window)
4.stylefmt
该工具也是官方推荐，可以批量修改，使用如下命令修改，详情见 github (opens new window) (opens new window)
stylefmt --stdin-filename input.css
1
2
2
{
"rules": {
# 缩进 4 个空格
"indentation": 4,
# 去掉小数点前面的 0
"number-leading-zero": "never",
# 使用双引号
"string-quotes": "double",
# 每个属性声明末尾都要加分号
"declaration-block-trailing-semicolon": "always",
# 属性值 0 后面不加单位
"length-zero-no-unit": true,
# 对空行的处理
# 第一条属性声明前不允许有空行
"declaration-empty-line-before": [
"never",
{ ignore: [ "after-declaration" ] }
],
# 每个样式规则前后都有空行，除了第一条规则与规则前有注释
"rule-empty-line-before": [
"always",
{ except: [ "after-single-line-comment", "first-nested" ] }
],
# 在结尾 "}" 之前不允许有空行
"block-closing-brace-empty-line-before": [ "never" ],
# "@" 语句之前都有空行，但是忽略 "@" 语句在代码块中间与同个非代码块 "@" 语句之间的空行这两种情况
"at-rule-empty-line-before": [
"always",
{ ignore: [ "inside-block", "blockless-after-same-name-blockless" ] }
],
# 不允许超过一行的空行
"max-empty-lines": 1,
# 每行句末不允许有多余空格
"no-eol-whitespace": true,
# 文件末尾需要有一个空行
"no-missing-end-of-source-newline": true,
# 大小写处理
"unit-case": "lower",
"color-hex-case": "upper",
"value-keyword-case": "lower",
"function-name-case": "lower",
"property-case": "lower",
"at-rule-name-case": "lower",
"selector-pseudo-class-case": "lower",
"selector-pseudo-element-case": "lower",
"selector-type-case": "lower",
"media-feature-name-case": "lower",
# 对空格的处理
# "{" 前必须有空格
"block-opening-brace-space-before": "always",
# 注释 "/*" 后和 "*/" 前必须有空格
"comment-whitespace-inside": "always",
# 属性名 ":" 后必须有空格
"declaration-colon-space-after": "always",
# 属性名 ":" 前不能有空格
"declaration-colon-space-before": "never",
# 声明属性末尾 ";" 前不能有空格
"declaration-block-semicolon-space-before": "never",
# 属性值中的 "," 后必须有空格
"function-comma-space-after": "always",
# 选择器例如 ">、+、~" 前后必须要有空格
"selector-combinator-space-before": "always",
"selector-combinator-space-after": "always",
# 分隔多个选择器之间的 "," 后必须有空格
"selector-list-comma-space-after": "always",
# 分隔多个选择器之间的 "," 前不能有空格
"selector-list-comma-space-before": "never",
# 子代选择器之间没有额外空格
"selector-descendant-combinator-no-non-space": true,
# 多个属性值之间的 "," 后必须有空格
"value-list-comma-space-after": "always",
# 多个属性值之间的 "," 前不能有空格
"value-list-comma-space-before": "never",
# 媒体查询中设置断点宽度里的 ":" 后必须有空格
"media-feature-colon-space-after": "always",
# 媒体查询中设置断点宽度里的 ":" 前不能有空格
"media-feature-colon-space-before": "never"
}
}
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
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
编辑 (opens new window)