stylelint

Stylelint是一个强大的现代 CSS 样式检查工具,用于在 CSS、SCSS、Sass、Less和其它样式语言中识别和报告代码中的语法错误与不合理的写法。它帮助开发者维护一致的代码风格,提高代码质量。

步骤 1：安装 Stylelint

1pnpm add -D stylelint stylelint-order

步骤 2：创建 Stylelint 配置文件

在项目根目录下创建 .stylelintrc.json 配置文件

1{
2  "plugins": ["stylelint-order"],
3  "rules": {
4    "at-rule-no-unknown": null,
5    "scss/at-rule-no-unknown": true,
6    "order/properties-order": [
7      "position",
8      "top",
9      "right",
10      "bottom",
11      "left",
12      "z-index",
13      "display",
14      "float",
15      "width",
16      "height",
17      "max-width",
18      "max-height",
19      "min-width",
20      "min-height",
21      "padding",
22      "padding-top",
23      "padding-right",
24      "padding-bottom",
25      "padding-left",
26      "margin",
27      "margin-top",
28      "margin-right",
29      "margin-bottom",
30      "margin-left",
31      "margin-collapse",
32      "margin-top-collapse",
33      "margin-right-collapse",
34      "margin-bottom-collapse",
35      "margin-left-collapse",
36      "overflow",
37      "overflow-x",
38      "overflow-y",
39      "clip",
40      "clear",
41      "font",
42      "font-family",
43      "font-size",
44      "font-smoothing",
45      "osx-font-smoothing",
46      "font-style",
47      "font-weight",
48      "hyphens",
49      "src",
50      "line-height",
51      "letter-spacing",
52      "word-spacing",
53      "color",
54      "text-align",
55      "text-decoration",
56      "text-indent",
57      "text-overflow",
58      "text-rendering",
59      "text-size-adjust",
60      "text-shadow",
61      "text-transform",
62      "word-break",
63      "word-wrap",
64      "white-space",
65      "vertical-align",
66      "list-style",
67      "list-style-type",
68      "list-style-position",
69      "list-style-image",
70      "pointer-events",
71      "cursor",
72      "background",
73      "background-attachment",
74      "background-color",
75      "background-image",
76      "background-position",
77      "background-repeat",
78      "background-size",
79      "border",
80      "border-collapse",
81      "border-top",
82      "border-right",
83      "border-bottom",
84      "border-left",
85      "border-color",
86      "border-image",
87      "border-top-color",
88      "border-right-color",
89      "border-bottom-color",
90      "border-left-color",
91      "border-spacing",
92      "border-style",
93      "border-top-style",
94      "border-right-style",
95      "border-bottom-style",
96      "border-left-style",
97      "border-width",
98      "border-top-width",
99      "border-right-width",
100      "border-bottom-width",
101      "border-left-width",
102      "border-radius",
103      "border-top-right-radius",
104      "border-bottom-right-radius",
105      "border-bottom-left-radius",
106      "border-top-left-radius",
107      "border-radius-topright",
108      "border-radius-bottomright",
109      "border-radius-bottomleft",
110      "border-radius-topleft",
111      "content",
112      "quotes",
113      "outline",
114      "outline-offset",
115      "opacity",
116      "filter",
117      "visibility",
118      "size",
119      "zoom",
120      "transform",
121      "box-align",
122      "box-flex",
123      "box-orient",
124      "box-pack",
125      "box-shadow",
126      "box-sizing",
127      "table-layout",
128      "animation",
129      "animation-delay",
130      "animation-duration",
131      "animation-iteration-count",
132      "animation-name",
133      "animation-play-state",
134      "animation-timing-function",
135      "animation-fill-mode",
136      "transition",
137      "transition-delay",
138      "transition-duration",
139      "transition-property",
140      "transition-timing-function",
141      "background-clip",
142      "backface-visibility",
143      "resize",
144      "appearance",
145      "user-select",
146      "interpolation-mode",
147      "direction",
148      "marks",
149      "page",
150      "set-link-source",
151      "unicode-bidi",
152      "speak"
153    ],
154  }
155}

步骤 3：创建 stylelint 忽略文件

在项目根目录下创建 .stylelintignore 文件,指定 Stylelint 忽略的文件和文件夹：

node_modules
public
dist

步骤 4：添加 Stylelint 脚本

在 package.json 中添加 Stylelint 脚本命令：

1{
2  "scripts": {
3    "lint:css": "stylelint ***.{css,scss,vue} --cache --fix",
4  },
5}

步骤 5：运行 Stylelint

现在,你可以运行以下命令来检查 CSS 文件：

1pnpm lint:css

vite插件

1pnpm add vite-plugin-stylelint -D

1// vite.config.ts
2import { defineConfig } from "vite";
3import stylelint from "vite-plugin-stylelint";
4
5export default defineConfig({
6  plugins: [
7    stylelint({
8    	fix: true
9  	})
10  ],
11});

1{
2  "lint-staged": {
3    "*.{js,jsx,vue,ts,tsx}": [
4      "pnpm lint"
5    ],
6    "*.{vue,scss}": [
7      "pnpm lint:css"
8    ]
9  }
10}

stylelint#

vite插件#

stylelint

vite插件