@alexpavlov/stylelint-config-rational-order (英语)
Stytlint 配置, 将相关的财产声明按顺序组合排序 :
- 定位
- 框型号
- 类型
- 视觉
- 动画
- 杂项
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
/* Box Model */
display: block;
float: right;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
/* Typography */
color: #888;
font: normal 16px Helvetica, sans-serif;
line-height: 1.3;
text-align: center;
/* Visual */
background-color: #eee;
border: 1px solid #888;
border-radius: 4px;
opacity: 1;
/* Animation */
transition: all 1s;
/* Misc */
user-select: none;
}
所需资源
| 版本 | |
|---|---|
| 节点.js | >=20.19.0 |
stylelint | ^17 |
stylelint-order | ^8 |
stylelint 财务报告和审定财务报表 stylelint-order 是同伴的依附关系——自己安装,
如下所示.
使用量
- 添加
stylelint, (中文(简体) ),stylelint-order和您的项目软件包 :
npm install --save-dev stylelint stylelint-order @alexpavlov/stylelint-config-rational-order
或者,如果你喜欢纱线 而不是npm:
yarn add --dev stylelint stylelint-order @alexpavlov/stylelint-config-rational-order
- 在 Stylelint 内的扩展数组末尾添加此软件包 配置( 例如. stylelintrc) :
{
"extends": [
...(rest of your stylelint config),
"@alexpavlov/stylelint-config-rational-order"
]
}
此可共享配置相当于如下:
{
"plugins": [
"stylelint-order",
"@alexpavlov/stylelint-config-rational-order/plugin"
],
"rules": {
"order/properties-order": [],
"plugin/rational-order": [
true,
{
"border-in-box-model": false,
"empty-line-between-groups": false
}
]
}
}
"order/properties-order": [] 需要,而非装饰性: plugin/rational-order
以该规则名称报告警告,所以该条目让他们
严重。 如果您手动配置插件, 请保留它 .
因为它添加 stylelint-order 财务报告和审定财务报表 @alexpavlov/stylelint-config-rational-order 到插件并同时添加所需的规则,您在扩展此配置时不必亲自这样做.
可选选项/规则
框式边框
定义该 边框 财产属于.
若为 true 边框 属于 框模式区域。 。 。 .
默认值为 false (单位:千美元)边框 属于 视觉部分) (中文(简体) ).
组之间的空行
若为 true 在组之间添加一行空行。 默认值为 false。 。 。 .