useSortedAttributes

JSX and TSX

摘要

¥Summary

规则生效日期：v2.0.0

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

¥Diagnostic Category: assist/source/useSortedAttributes
来源：

¥Sources:
- 与 react/jsx-sort-props 相同
  
  ¥Same as react/jsx-sort-props

如何在编辑器中启用

¥How to enable in your editor

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

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

Use the source action code source.action.useSortedAttributes.biome

如何配置

¥How to configure

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

描述

¥Description

强制 JSX 元素中的属性排序。

¥Enforce attribute sorting in JSX elements.

此规则检查 JSX 属性是否以一致的方式排序。属性按字母顺序排序，使用自然排序。此规则不会将扩展属性视为可排序的属性。相反，每当遇到扩展属性时，它会对所有先前的非扩展属性进行排序，直到遇到最近的扩展属性（如果存在）。此设置可防止使用扩展属性破坏某些属性的重写。

¥This rule checks if the JSX props are sorted in a consistent way. Props are sorted alphabetically using a natural sort order. This rule will not consider spread props as sortable. Instead, whenever it encounters a spread prop, it will sort all the previous non spread props up until the nearest spread prop, if one exist. This prevents breaking the override of certain props using spread props.

示例

¥Examples

1
<Hello lastName="Smith" firstName="John" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1   │ - <Hello·lastName=“Smith”·firstName=“John”·/>;
      1 │ + <Hello·firstName=“John”·lastName=“Smith”·/>;
    2 2 │

1
<Hello lastName="Smith" firstName="John" {...this.props} tel="0000" address="111 Main Street"  {...another.props} lastName="Smith" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1   │ - <Hello·lastName=“Smith”·firstName=“John”·{...this.props}·tel=“0000”·address=“111·Main·Street”··{...another.props}·lastName=“Smith”·/>;
      1 │ + <Hello·firstName=“John”·lastName=“Smith”·{...this.props}·tel=“0000”·address=“111·Main·Street”··{...another.props}·lastName=“Smith”·/>;
    2 2 │   
  
code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1   │ - <Hello·lastName=“Smith”·firstName=“John”·{...this.props}·tel=“0000”·address=“111·Main·Street”··{...another.props}·lastName=“Smith”·/>;
      1 │ + <Hello·lastName=“Smith”·firstName=“John”·{...this.props}·address=“111·Main·Street”·tel=“0000”··{...another.props}·lastName=“Smith”·/>;
    2 2 │

选项

¥Options

此操作接受以下选项

¥This actions accepts following options

`sortOrder`

此选项支持 natural 和 lexicographic 值。natural 是默认设置。

¥This options supports natural and lexicographic values. Where as natural is the default.

以下将应用自然排序。

¥Following will apply the natural sort order.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedAttributes": {
6
          "options": {
7
            "sortOrder": "natural"
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
<Hello tel={5555555} {...this.props} opt1="John" opt2="" opt12="" opt11="" />;

code-block.jsx:1:1 assist/source/useSortedAttributes  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The attributes are not sorted. 
  
  > 1 │ <Hello tel={5555555} {…this.props} opt1=“John” opt2="" opt12="" opt11="" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the JSX props.
  
    1   │ - <Hello·tel={5555555}·{...this.props}·opt1=“John”·opt2=""·opt12=""·opt11=""·/>;
      1 │ + <Hello·tel={5555555}·{...this.props}·opt1=“John”·opt2=""·opt11=""·opt12=""·/>;
    2 2 │

以下将应用字典序排序。

¥Following will apply the lexicographic sort order.

1
{
2
  "assist": {
3
    "actions": {
4
      "source": {
5
        "useSortedAttributes": {
6
          "options": {
7
            "sortOrder": "lexicographic"
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
<Hello tel={5555555} {...this.props} opt1="John" opt2="" opt12="" opt11="" />;

code-block.jsx:1:1 assist/source/useSortedAttributes  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The attributes are not sorted. 
  
  > 1 │ <Hello tel={5555555} {…this.props} opt1=“John” opt2="" opt12="" opt11="" />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Safe fix: Sort the JSX props.
  
    1   │ - <Hello·tel={5555555}·{...this.props}·opt1=“John”·opt2=""·opt12=""·opt11=""·/>;
      1 │ + <Hello·tel={5555555}·{...this.props}·opt1=“John”·opt11=""·opt12=""·opt2=""·/>;
    2 2 │

useSortedAttributes

摘要

如何在编辑器中启用

如何配置

描述

示例

选项

sortOrder

相关链接

`sortOrder`