sort-svelte-attributes
Enforce sorted attributes in Svelte elements.
Maintaining a consistent order of attributes in Svelte elements enhances readability and maintainability. This rule ensures that attributes are sorted, making the structure of your Svelte components more predictable and easier to manage.
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.
Try it out
Options
This rule accepts an options object with the following properties:
type
default:'alphabetical'Specifies the sorting method.
'alphabetical'— Sort items alphabetically (e.g., “a” < “b” < “c”).'natural'— Sort items in a natural order (e.g., “item2” < “item10”).'line-length'— Sort items by the length of the code line (shorter lines first).
order
default:'asc'Determines whether the sorted items should be in ascending or descending order.
'asc'— Sort items in ascending order (A to Z, 1 to 9).'desc'— Sort items in descending order (Z to A, 9 to 1).
ignoreCase
default:trueControls whether sorting should be case-sensitive or not.
true— Ignore case when sorting alphabetically or naturally (e.g., “A” and “a” are the same).false— Consider case when sorting (e.g., “A” comes before “a”).
groups
default:[]Allows you to specify a list of Svelte attribute groups for sorting. Groups help organize attributes into categories, making your components more readable and maintainable. Multiple groups can be combined to achieve the desired sorting order.
There are predefined groups: 'multiline', 'shorthand', 'svelte-shorthand'.
Predefined Groups:
'multiline'— Attributes whose length exceeds one line, such as event handlers or functions.'shorthand'— Shorthand attributes, which are used without a value, typically for boolean props.'svelte-shorthand'— Svelte’s shorthand for replacingname={name}with{name}.'unknown'— Svelte attributes that don’t fit into any other group.
Example:
<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>
customGroups
default:{}You can define your own groups for Svelte attributes using custom glob patterns for matching.
Example:
{
groups: [
+ ['this', 'bind-this'],
'multiline',
+ 'style-props',
+ 'class',
+ ['bind-directives', 'use-directives'],
['shorthand', 'svelte-shorthand'],
],
+ customGroups: {
+ 'style-props': '--style-props',
+ 'bind-directives': 'bind:*',
+ 'use-directives': 'use:*',
+ 'bind-this': 'bind:this',
+ class: 'class',
+ this: 'this',
+ },
}
Usage
In order to start using this rule, you need to install additional dependency:
Version
This rule was introduced in v2.0.0.