样式lint - 配置 - 合理化顺序
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;
}
使用量
- 添加
stylelint, (中文(简体) ),stylelint-order和您的项目软件包 :
npm install --save-dev stylelint stylelint-order stylelint-config-rational-order
# or, if you prefer yarn over npm:
yarn add --dev stylelint stylelint-order stylelint-config-rational-order
- 在 Stylelint 内的扩展数组末尾添加此软件包 配置( 例如. stylelintrc) :
{
"extends": [
// "stylelint-config-standard",
"stylelint-config-rational-order"
]
}
此共享配置包含以下内容:
{
"plugins": [
"stylelint-order",
"stylelint-config-rational-order/plugin"
],
"rules": {
"order/properties-order": [],
"plugin/rational-order": [true, {
"border-in-box-model": false,
"empty-line-between-groups": false,
}]
}
}
因为它添加 stylelint-order 财务报告和审定财务报表 stylelint-config-rational-order 到插件并同时添加所需的规则,您在扩展此配置时不必亲自这样做.
可选选项/规则
框式边框
定义该 边框 财产属于.
若为 true 边框 属于 框模式区域。 。 。 .
默认值为 false (单位:千美元)边框 属于 视觉部分) (中文(简体) ).
组之间的空行
若为 true 在组之间添加一行空行。 默认值为 false。 。 。 .