Skip to content

Commit 66a3d43

Browse files
AhChi529AhChi529
committed
doc：更新代码规范文档 STANDARD
1 parent 8425979 commit 66a3d43

File tree

1 file changed

+187
-11
lines changed

1 file changed

+187
-11
lines changed

‎STANDARD.md

+187-11
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,19 @@ npm install prettier
1818

1919
### 2、安装 Vscode 插件（Prettier）：
2020

21-
![prettier](https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/img/20220510134626.png)
21+
![Prettier](https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/md/Prettier.png)
2222

2323
### 3、配置 Prettier：
2424

2525
```javascript
26-
// https://www.prettier.cn
26+
// @see: https://www.prettier.cn
27+
2728
module.exports = {
2829
// 超过最大值换行
2930
printWidth: 130,
3031
// 缩进字节数
3132
tabWidth: 2,
32-
// 使用制表符而不是空格缩进行(true代表table，false代表space)
33+
// 使用制表符而不是空格缩进行
3334
useTabs: true,
3435
// 结尾不用分号(true有，false没有)
3536
semi: true,
@@ -61,6 +62,7 @@ module.exports = {
6162
// Vue文件脚本和样式标签缩进
6263
vueIndentScriptAndStyle: false
6364
};
65+
6466
```
6567

6668

@@ -86,15 +88,17 @@ npm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-v
8688

8789
- **ESLint：**
8890

89-
![eslint](https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/img/20220510135758.png)
91+
![ESLint](https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/md/ESLint.png)
9092

9193
- **TSLint：**
9294

93-
![tslint](https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/img/20220510140124.png)
95+
![TSLint](https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/md/TSLint.png)
9496

9597
### 3、配置 ESLint：
9698

9799
```javascript
100+
// @see: http://eslint.cn
101+
98102
module.exports = {
99103
root: true,
100104
env: {
@@ -160,13 +164,181 @@ module.exports = {
160164
"vue/multi-word-component-names": "off" // 要求组件名称始终为 “-” 链接的单词
161165
}
162166
};
167+
163168
```
164169

165170

166171

167172
## 四、样式规范工具（StyleLint）
168173

169-
> ……后面补充
174+
### 1、安装 StyleLint 相关插件：
175+
176+
```text
177+
npm i stylelint stylelint-config-html stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss stylelint-order postcss postcss-html stylelint-config-prettier -D
178+
```
179+
180+
| 依赖 | 作用描述 |
181+
| :-------------------------------: | :----------------------------------------------------------: |
182+
| stylelint | stylelint 核心库 |
183+
| stylelint-config-html | Stylelint 的可共享 HTML（和类似 HTML）配置，捆绑 postcss-html 并对其进行配置。 |
184+
| stylelint-config-recommended-scss | 扩展 stylelint-config-recommended 共享配置，并为 SCSS 配置其规则 |
185+
| stylelint-config-recommended-vue | 扩展 stylelint-config-recommended 共享配置，并为 Vue 配置其规则 |
186+
| stylelint-config-standard | 打开额外的规则来执行在规范和一些 CSS 样式指南中发现的通用约定，包括：惯用 CSS 原则，谷歌的 CSS 样式指南，Airbnb 的样式指南，和 @mdo 的代码指南。 |
187+
| stylelint-config-standard-scss | 扩展 stylelint-config-standard 共享配置，并为 SCSS 配置其规则 |
188+
| postcss | postcss-html 的依赖包 |
189+
| postcss-html | 用于解析 HTML（和类似 HTML）的 PostCSS 语法 |
190+
| stylelint-order | 属性的排序（插件包） |
191+
| stylelint-config-prettier | 关闭所有不必要的或可能与 Prettier 冲突的规则 |
192+
193+
### 2、安装 Vscode 插件（Stylelint）：
194+
195+
![Stylelint](https://iamge-1259297738.cos.ap-chengdu.myqcloud.com/md/Stylelint.png)
196+
197+
### 3、在目录的 .vscode 文件中新建 settings.json：
198+
199+
```json
200+
{
201+
"stylelint.enable": true,
202+
"editor.codeActionsOnSave": {
203+
"source.fixAll.stylelint": true
204+
},
205+
"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass","html"]
206+
}
207+
```
208+
209+
> 😎也可以在vscode中全局配置上述json代码😎
210+
211+
212+
213+
### 4、配置 stylelint.config.js
214+
215+
````javascript
216+
// @see: https://stylelint.io
217+
218+
module.exports = {
219+
/* 继承某些已有的规则 */
220+
extends: [
221+
"stylelint-config-standard",
222+
"stylelint-config-html/vue",
223+
"stylelint-config-standard-scss",
224+
"stylelint-config-recommended-vue/scss",
225+
"stylelint-config-prettier"
226+
],
227+
/* 使用排序插件 */
228+
plugins: ["stylelint-order"],
229+
overrides: [
230+
// 扫描 .vue/html 文件中的<style>标签内的样式
231+
{
232+
files: ["**/*.{vue,html}"],
233+
customSyntax: "postcss-html"
234+
}
235+
],
236+
/**
237+
* null => 关闭该规则
238+
*/
239+
rules: {
240+
indentation: null, // 指定缩进空格
241+
"no-descending-specificity": null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
242+
"function-url-quotes": "always", // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
243+
"string-quotes": "double", // 指定字符串使用单引号或双引号
244+
"unit-case": null, // 指定单位的大小写 "lower(全小写)"|"upper(全大写)"
245+
"color-hex-case": "lower", // 指定 16 进制颜色的大小写 "lower(全小写)"|"upper(全大写)"
246+
"color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
247+
"rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行。)"
248+
"font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
249+
"block-opening-brace-space-before": "always", // 要求在块的开大括号之前必须有一个空格或不能有空白符 "always(大括号前必须始终有一个空格)"|"never(左大括号之前绝不能有空格)"|"always-single-line(在单行块中的左大括号之前必须始终有一个空格)"|"never-single-line(在单行块中的左大括号之前绝不能有空格)"|"always-multi-line(在多行块中，左大括号之前必须始终有一个空格)"|"never-multi-line(多行块中的左大括号之前绝不能有空格)"
250+
"property-no-unknown": null, // 禁止未知的属性(true 为不允许)
251+
"no-empty-source": null, // 禁止空源码
252+
"declaration-block-trailing-semicolon": null, // 要求或不允许在声明块中使用尾随分号 string："always(必须始终有一个尾随分号)"|"never(不得有尾随分号)"
253+
"selector-pseudo-class-no-unknown": [
254+
true,
255+
{
256+
ignorePseudoClasses: ["deep"]
257+
}
258+
],
259+
// 样式的排序规则
260+
"order/properties-order": [
261+
"position",
262+
"top",
263+
"right",
264+
"bottom",
265+
"left",
266+
"z-index",
267+
"display",
268+
"justify-content",
269+
"align-items",
270+
"float",
271+
"clear",
272+
"overflow",
273+
"overflow-x",
274+
"overflow-y",
275+
"margin",
276+
"margin-top",
277+
"margin-right",
278+
"margin-bottom",
279+
"margin-left",
280+
"padding",
281+
"padding-top",
282+
"padding-right",
283+
"padding-bottom",
284+
"padding-left",
285+
"width",
286+
"min-width",
287+
"max-width",
288+
"height",
289+
"min-height",
290+
"max-height",
291+
"font-size",
292+
"font-family",
293+
"font-weight",
294+
"border",
295+
"border-style",
296+
"border-width",
297+
"border-color",
298+
"border-top",
299+
"border-top-style",
300+
"border-top-width",
301+
"border-top-color",
302+
"border-right",
303+
"border-right-style",
304+
"border-right-width",
305+
"border-right-color",
306+
"border-bottom",
307+
"border-bottom-style",
308+
"border-bottom-width",
309+
"border-bottom-color",
310+
"border-left",
311+
"border-left-style",
312+
"border-left-width",
313+
"border-left-color",
314+
"border-radius",
315+
"text-align",
316+
"text-justify",
317+
"text-indent",
318+
"text-overflow",
319+
"text-decoration",
320+
"white-space",
321+
"color",
322+
"background",
323+
"background-position",
324+
"background-repeat",
325+
"background-size",
326+
"background-color",
327+
"background-clip",
328+
"opacity",
329+
"filter",
330+
"list-style",
331+
"outline",
332+
"visibility",
333+
"box-shadow",
334+
"text-shadow",
335+
"resize",
336+
"transition"
337+
]
338+
}
339+
};
340+
341+
````
170342

171343

172344

@@ -227,6 +399,7 @@ npm install husky -D
227399
228400
````text
229401
# 编辑 package.json > prepare 脚本并运行一次
402+
230403
npm set-script prepare "husky install"
231404
npm run prepare
232405
````
@@ -253,9 +426,12 @@ npx husky add .husky/pre-commit "npm run lint:lint-staged"
253426
254427
````text
255428
module.exports = {
429+
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
256430
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
257-
"*.{scss,less,css,html,md},package.json": ["prettier --write"],
258-
"*.{js,jsx,ts,tsx,vue}": ["prettier --write", "eslint --fix"]
431+
"package.json": ["prettier --write"],
432+
"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
433+
"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
434+
"*.md": ["prettier --write"]
259435
};
260436
````
261437

@@ -266,7 +442,7 @@ module.exports = {
266442
> **安装：**
267443
268444
````text
269-
// commitlint && @commitlint/cli 其中一个都行
445+
// commitlint && @commitlint/cli 其中一个插件都行
270446
npm i commitlint @commitlint/config-conventional -D
271447
npm i @commitlint/cli @commitlint/config-conventional -D
272448
````
@@ -309,7 +485,7 @@ npm install cz-git -D
309485
> **新建 commitlint.config.js 文件：**
310486
311487
````javascript
312-
// @see: https://cz-git.qbenben.com/zh/guide/
488+
// @see: https://cz-git.qbenben.com/zh/guide
313489
/** @type {import('cz-git').UserConfig} */
314490

315491
module.exports = {
@@ -437,7 +613,7 @@ module.exports = {
437613
// { value: "回退", name: "回退: ⏪️ 回滚 commit", emoji: ":rewind:" },
438614
// { value: "其他", name: "其他: 🔨 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: ":hammer:" }
439615
],
440-
useEmoji: true,
616+
useEmoji: false,
441617
themeColorCode: "",
442618
scopes: [],
443619
allowCustomScopes: true,

0 commit comments

Comments
 (0)