Skip to content

Commit 7e4286a

Browse files
weihongyu12weihongyu12
committed
CSS/SCSS规范，增加Vue专属规则
1 parent 37b65da commit 7e4286a

File tree

2 files changed

+58
-11
lines changed

2 files changed

+58
-11
lines changed

‎docs/specification/code/css/README.md‎

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@ sidebar_position: 2
44

55
# CSS 规范
66

7+
```js
8+
// stylelint.config.js
9+
10+
module.exports = {
11+
extends: [
12+
'stylelint-config-twbs-bootstrap',
13+
],
14+
};
15+
```
16+
717
:::warning
818
stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整理的内容非常多，在开发过程中，仍以实际的 stylelint 检查为准。本章内容仅供参考
919
:::
@@ -374,12 +384,10 @@ stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整
374384
- [`tab-size`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/tab-size)
375385
- [`white-space`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space)
376386
- [`vertical-align`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align)
377-
378387
- [`list-style`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style)
379388
- [`list-style-position`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-position)
380389
- [`list-style-type`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type)
381390
- [`list-style-image`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-image)
382-
383391
- [`src`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/src)
384392
- [`font-display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-display)
385393
- [`unicode-range`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/unicode-range)
@@ -400,20 +408,17 @@ stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整
400408
- [`caret-color`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/caret-color)
401409
- [`visibility`](https://developer.mozilla.org/zh-CN/docs/Web/visibility)
402410
- [`zoom`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/zoom)
403-
404411
- [`table-layout`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout)
405412
- [`empty-cells`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/empty-cells)
406413
- [`caption-side`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/caption-side)
407414
- [`border-spacing`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-spacing)
408415
- [`border-collapse`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-collapse)
409-
410416
- [`content`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/content)
411417
- [`quotes`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/quotes)
412418
- [`counter-res`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter-reset)
413419
- [`counter-set`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter-set)
414420
- [`counter-increment`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter-increment)
415421
- [`resize`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize)
416-
417422
- [`scroll-behavior`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior)
418423
- [`scroll-snap-type`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type)
419424
- [`scroll-snap-align`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-align)
@@ -440,11 +445,9 @@ stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整
440445
- [`scroll-margin-right`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-margin-right)
441446
- [`scroll-margin-bottom`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-margin-bottom)
442447
- [`scroll-margin-left`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-margin-left)
443-
444448
- [`scrollbar-color`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-color)
445449
- [`scrollbar-gutter`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-gutter)
446450
- [`scrollbar-width`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width)
447-
448451
- [`user-select`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select)
449452
- `-webkit-user-select`
450453
- [`nav-index`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/nav-index)
@@ -454,13 +457,13 @@ stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整
454457
- [`nav-left`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/nav-left)
455458

456459
### 图像、背景和边框
460+
457461
- [`object-fit`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit)
458462
- [`object-position`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position)
459463
- ~~`-ms-interpolation-mode`~~
460464
- [`image-orientation`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/image-orientation)
461465
- [`image-rendering`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/image-rendering)
462466
- [`image-resolution`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/image-resolution)
463-
464467
- [`background`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background)
465468
- [`background-color`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color)
466469
- [`background-image`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image)
@@ -527,7 +530,7 @@ stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整
527530
- [`border-bottom-right-radius`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-bottom-right-radius)
528531
- [`border-bottom-left-radius`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-bottom-left-radius)
529532
- [`border-image`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image)
530-
- [`border-image-source](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-source)
533+
- [`border-image-source`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-source)
531534
- [`border-image-slice`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-slice)
532535
- [`border-image-width`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-width)
533536
- [`border-image-outset`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-outset)
@@ -570,7 +573,6 @@ stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整
570573
- [`text-anchor`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/text-anchor)
571574
- [`word-spacing`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/word-spacing)
572575
- [`writing-mode`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/writing-mode)
573-
574576
- [`fill`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill)
575577
- [`fill-opacity`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-opacity)
576578
- [`fill-rule`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule)
@@ -582,7 +584,6 @@ stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整
582584
- [`stroke-miterlimit`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-miterlimit)
583585
- [`stroke-opacity`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-opacity)
584586
- [`stroke-width`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-width)
585-
586587
- [`color-interpolation`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/color-interpolation)
587588
- [`color-interpolation-filters`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attributecolor-interpolation-filters)
588589
- [`color-profile`](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/color-profile)
@@ -630,3 +631,22 @@ stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整
630631
- [`break-after`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/break-after)
631632
- [`orphans`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/orphans)
632633
- [`widows`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/widows)
634+
635+
## Vue 专属规则
636+
637+
```js
638+
// stylelint.config.js
639+
640+
module.exports = {
641+
extends: [
642+
'stylelint-config-recommended-vue',
643+
],
644+
};
645+
```
646+
647+
| 来源 | 规则名称 | 配置值 | 描述 |
648+
|---|---|---|---|
649+
| stylelint-config-recommended-vue | [selector-pseudo-class-no-unknown](https://stylelint.io/user-guide/rules/selector-pseudo-class-no-unknown) | `[true, { ignorePseudoClasses: ["deep", "global", "slotted"] }]` | 禁止未知的伪类选择器，但忽略 Vue 特定的伪类（如 `deep`、`global`、`slotted`） |
650+
| stylelint-config-recommended-vue | [selector-pseudo-element-no-unknown](https://stylelint.io/user-guide/rules/selector-pseudo-element-no-unknown) | `[true, { ignorePseudoElements: ["v-deep", "v-global", "v-slotted"] }]` | 禁止未知的伪元素选择器，但忽略 Vue 特定的伪元素（如 `v-deep`、`v-global`、`v-slotted`） |
651+
| stylelint-config-recommended-vue | [declaration-property-value-no-unknown](https://stylelint.io/user-guide/rules/declaration-property-value-no-unknown) | `[true, { ignoreProperties: { "/.*/": "/v-bind\\(.+\\)/" } }]` | 禁止未知的声明属性值，但忽略包含 `v-bind` 表达式的值 |
652+
| stylelint-config-recommended-vue | [function-no-unknown](https://stylelint.io/user-guide/rules/function-no-unknown) | `[true, { ignoreFunctions: ["v-bind"] }]` | 禁止未知的 CSS 函数，但忽略 Vue 的 `v-bind` 函数 |

‎docs/specification/code/scss/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@ sidebar_position: 3
44

55
# SCSS 规范
66

7+
```js
8+
// stylelint.config.js
9+
10+
module.exports = {
11+
extends: [
12+
'stylelint-config-twbs-bootstrap',
13+
],
14+
};
15+
```
16+
717
:::warning
818
stylelint 规则参考 `stylelint-config-twbs-bootstrap`，但是由于需要整理的内容非常多，在开发过程中，仍以实际的 stylelint 检查为准。本章内容仅供参考
919
:::
@@ -66,3 +76,20 @@ SCSS 的 stylelint 规则继承于 [CSS 规则](/docs/specification/code/css)
6676
| stylelint-config-twbs-bootstrap | [scss/media-feature-value-dollar-variable](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/media-feature-value-dollar-variable/README.md) | `null` | 媒体特征值使用美元变量 |
6777
| stylelint-config-twbs-bootstrap | [scss/no-global-function-names](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/no-global-function-names/README.md) | `null` | 禁止全局函数名 |
6878
| stylelint-config-twbs-bootstrap | [scss/selector-no-redundant-nesting-selector](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/selector-no-redundant-nesting-selector/README.md) | `true` | 禁止冗余的嵌套选择器 |
79+
80+
## Vue 专属规则
81+
82+
```js
83+
// stylelint.config.js
84+
85+
module.exports = {
86+
extends: [
87+
'stylelint-config-recommended-vue/scss',
88+
],
89+
};
90+
```
91+
92+
| 来源 | 规则名称 | 配置值 | 描述 |
93+
|---|---|---|---|
94+
| stylelint-config-recommended-vue | [selector-pseudo-class-no-unknown](https://stylelint.io/user-guide/rules/selector-pseudo-class-no-unknown) | `[true, { ignorePseudoClasses: ["deep", "global", "slotted"] }]` | 禁止未知的伪类选择器，但忽略 Vue 特定的伪类（如 `deep`、`global`、`slotted`） |
95+
| stylelint-config-recommended-vue | [selector-pseudo-element-no-unknown](https://stylelint.io/user-guide/rules/selector-pseudo-element-no-unknown) | `[true, { ignorePseudoElements: ["v-deep", "v-global", "v-slotted"] }]` | 禁止未知的伪元素选择器，但忽略 Vue 特定的伪元素（如 `v-deep`、`v-global`、`v-slotted`） |

0 commit comments

Comments
 (0)