sort-svelte-attributes

💼 This rule is enabled in the following configs: recommended-alphabetical, recommended-line-length, recommended-natural.

🔧 This rule is automatically fixable by the --fix CLI option.

📖 Rule Details

Enforce sorted attributes in Svelte elements.

It's safe. The rule considers spread elements in an attributes list and does not break component functionality.

Important

If you use the sort-attributes rule from the eslint-plugin-svelte plugin, it is highly recommended to disable it to avoid conflicts.

💡 Examples

Alphabetical and Natural Sorting

// ❌ Incorrect
<Button
  size="s"
  type="button"
  on:click={() => console.log("Clicked")}
  color="primary"
  disabled={false}
  variant="solid"
>
  Click me
</Button>

// ✅ Correct
<Button
  color="primary"
  disabled={false}
  on:click={() => console.log("Clicked")}
  size="s"
  type="button"
  variant="solid"
>
  Click me
</Button>

Sorting by Line Length

// ❌ Incorrect
<Button
  size="s"
  type="button"
  on:click={() => console.log("Clicked")}
  color="primary"
  disabled={false}
  variant="solid"
>
  Click me
</Button>

// ✅ Correct
<Button
  on:click={() => console.log("Clicked")}
  disabled={false}
  variant="solid"
  color="primary"
  type="button"
  size="s"
>
  Click me
</Button>

🔧 Options

This rule accepts an options object with the following properties:

type CustomGroup = string
type Group =
  | 'multiline'
  | 'shorthand'
  | 'svelte-shorthand'
  | 'unknown'
  | CustomGroup

interface Options {
  type?: 'alphabetical' | 'natural' | 'line-length'
  order?: 'asc' | 'desc'
  'ignore-case'?: boolean
  groups?: (Group | Group[])[]
  'custom-groups': { [key: CustomGroup]: string[] | string }
}

type

_{(default: 'alphabetical')}

• alphabetical - sort alphabetically.
• natural - sort in natural order.
• line-length - sort by code line length.

order

_{(default: 'asc')}

• asc - enforce properties to be in ascending order.
• desc - enforce properties to be in descending order.

ignore-case

_{(default: false)}

Only affects alphabetical and natural sorting. When true the rule ignores the case-sensitivity of the order.

groups

_{(default: [])}

You can set up a list of Svelte attribute groups for sorting. Groups can be combined. There are predefined groups: 'multiline', 'shorthand', 'svelte-shorthand'.

<button
  {/* 'multiline' - Props whose length exceeds one line */}
  on:click={event => {
    event.preventDefault()
    fetchDate()
  }}
  {/* 'shorthand' - Shorthand property for props with `true` value */}
  autofocus
  {/* 'svelte-shorthand' - Svelte's shorthand for replacing name={name} with {name} */}
  {disabled}
>
  Click me
</button>

custom-groups

_{(default: {})}

You can define your own groups for Svelte attributes. The minimatch library is used for pattern matching.

Example:

{
  "custom-groups": {
    "this": "this",
    "bind-this": "bind:this",
    "style-props": "--style-props",
    "class": "class",
    "bind-directives": "bind:*",
    "use-directives": "use:*"
  },
  "groups": [
    ["this", "bind-this"],
    "style-props",
    "class",
    ["bind-directives", "use-directives"]
  ]
}

⚙️ Usage

Important

In order to start using this rule, you need to install additional dependencies:

• svelte
• svelte-eslint-parser

Legacy Config

// .eslintrc
{
  "plugins": ["perfectionist"],
  "rules": {
    "perfectionist/sort-svelte-attributes": [
      "error",
      {
        "type": "natural",
        "order": "asc",
        "groups": ["multiline", "unknown", ["shorthand", "svelte-shorthand"]]
      }
    ]
  }
}

Flat Config

// eslint.config.js
import perfectionist from 'eslint-plugin-perfectionist'

export default [
  {
    plugins: {
      perfectionist,
    },
    rules: {
      'perfectionist/sort-svelte-attributes': [
        'error',
        {
          type: 'natural',
          order: 'asc',
          groups: ['multiline', 'unknown', ['shorthand', 'svelte-shorthand']],
        },
      ],
    },
  },
]

🚀 Version

This rule was introduced in v2.0.0.

📚 Resources

• Rule source
• Test source