useSortedProperties

摘要

¥Summary

规则生效日期：v2.0.0

¥Rule available since: v2.0.0
诊断类别：assist/source/useSortedProperties

¥Diagnostic Category: assist/source/useSortedProperties

如何在编辑器中启用

¥How to enable in your editor

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.action.useSortedProperties.biome": "explicit",
4
    "source.fixAll.biome": "explicit"
5
  }
6
}

1
{
2
  "code_actions_on_format": {
3
    "source.action.useSortedProperties.biome": true,
4
    "source.fixAll.biome": true
5
  }
6
}

Use the source action code source.action.useSortedProperties.biome

如何配置

¥How to configure

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedProperties": "on"
6
      }
7
    }
8
  }
9
}

描述

¥Description

强制要求 CSS 属性和嵌套规则的顺序。

¥Enforce ordering of CSS properties and nested rules.

此规则确保 CSS 规则的内容顺序一致。

¥This rule ensures the contents of a CSS rule are ordered consistently.

属性按语义排序，更重要的属性位于顶部附近，相似的属性分组在一起。嵌套规则和 at 规则位于属性之后。

¥Properties are ordered semantically, with more important properties near the top and similar properties grouped together. Nested rules and at-rules are placed after properties.

顺序大致如下：

¥The ordering is roughly:

自定义属性

¥Custom properties
布局属性（display、flex、grid）

¥Layout properties (display, flex, grid)
边距和内边距属性

¥Margin and padding properties
排版属性（字体、颜色）

¥Typography properties (font, color)
交互属性（指针事件、可见性）

¥Interaction properties (pointer-events, visibility)
背景和边框属性

¥Background and border properties
过渡和动画属性

¥Transition and animation properties
嵌套规则、媒体查询和其他 at 规则

¥Nested rules, media queries and other at-rules

示例

¥Examples

无效

¥Invalid

1
p {
2
  transition: opacity 1s ease;
3
  border: 1px solid black;
4
  pointer-events: none;
5
  color: black;
6
  margin: 8px;
7
  display: block;
8
  --custom: 100;
9
}

code-block.css:1:3 assist/source/useSortedProperties  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The properties are not sorted.
  
   > 1 │ p {
       │   ^
   > 2 │   transition: opacity 1s ease;
   > 3 │   border: 1px solid black;
   > 4 │   pointer-events: none;
   > 5 │   color: black;
   > 6 │   margin: 8px;
   > 7 │   display: block;
   > 8 │   —custom: 100;
   > 9 │ }
       │ ^
    10 │ 
  
  ℹ Safe fix: Sort these properties
  
     1  1 │   p {
     2    │ - ··transition:·opacity·1s·ease;
     3    │ - ··border:·1px·solid·black;
     4    │ - ··pointer-events:·none;
        2 │ + ··--custom:·100;
        3 │ + ··display:·block;
        4 │ + ··margin:·8px;
     5  5 │     color: black;
     6    │ - ··margin:·8px;
     7    │ - ··display:·block;
     8    │ - ··--custom:·100;
        6 │ + ··pointer-events:·none;
        7 │ + ··border:·1px·solid·black;
        8 │ + ··transition:·opacity·1s·ease;
     9  9 │   }
    10 10 │

1
p {
2
  span { color: blue; }
3
  color: red;
4
}

code-block.css:1:3 assist/source/useSortedProperties  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The properties are not sorted.
  
  > 1 │ p {
      │   ^
  > 2 │   span { color: blue; }
  > 3 │   color: red;
  > 4 │ }
      │ ^
    5 │ 
  
  ℹ Safe fix: Sort these properties
  
    1 1 │   p {
    2   │ - ··span·{·color:·blue;·}
    3   │ - ··color:·red;
      2 │ + ··color:·red;
      3 │ + ··span·{·color:·blue;·}
    4 4 │   }
    5 5 │

有效

¥Valid

1
p {
2
  --custom: 100;
3
  display: block;
4
  margin: 8px;
5
  color: black;
6
  pointer-events: none;
7
  border: 1px solid black;
8
  transition: opacity 1s ease;
9
}

1
p {
2
  color: red;
3
  span { color: blue; }
4
}

useSortedProperties

摘要

如何在编辑器中启用

如何配置

描述

示例

无效

有效

相关链接