useSortedAttributes

JSX and TSX

Podsumowanie

• Reguła dostępna od: v2.0.0
• Kategoria diagnostyczna: assist/source/useSortedAttributes
• Domyślna ważność tej reguły to informacja.
• Źródła:
  • To samo co react/jsx-sort-props

Jak włączyć w edytorze

VS Code

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.action.useSortedAttributes.biome": "explicit",
    "source.fixAll.biome": "explicit"
  }
}

Zed

.zed/settings.json

{
  "code_actions_on_format": {
    "source.action.useSortedAttributes.biome": true,
    "source.fixAll.biome": true
  }
}

Other editors

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

Jak skonfigurować

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedAttributes": "on"
      }
    }
  }
}

Opis

Wymusza sortowanie atrybutów w elementach JSX.

Ta reguła sprawdza, czy właściwości JSX są posortowane w spójny sposób. Właściwości są sortowane alfabetycznie używając naturalnego porządku sortowania. Ta reguła nie będzie traktować spread props jako sortowalnych. Zamiast tego, gdy napotka spread prop, posortuje wszystkie poprzednie nie-spread props aż do najbliższego spread prop, jeśli taki istnieje. To zapobiega łamaniu nadpisywania pewnych właściwości używając spread props.

Przykłady

<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 │   
  

<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 │   
  

Opcje

Ta akcja akceptuje następujące opcje

sortOrder

Ta opcja obsługuje wartości natural i lexicographic. Gdzie natural jest domyślną.

Poniższe zastosuje naturalny porządek sortowania.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedAttributes": {
          "options": {
            "sortOrder": "natural"
          }
        }
      }
    }
  }
}

<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 │   
  

Poniższe zastosuje leksykograficzny porządek sortowania.

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "useSortedAttributes": {
          "options": {
            "sortOrder": "lexicographic"
          }
        }
      }
    }
  }
}

<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 │