Skip to content

Files

Latest commit

 

History

History
248 lines (223 loc) · 7.09 KB

sort-attributes.md

File metadata and controls

248 lines (223 loc) · 7.09 KB

Pattern: Wrong attribute order

Issue: -

Description

This rule aims to enforce ordering of attributes.
The default order is:

  • this property.
  • bind:this directive.
  • id attribute.
  • name attribute.
  • slot attribute.
  • --style-props (Alphabetical order within the same group.)
  • style attribute, and style: directives.
  • class attribute.
  • class: directives. (Alphabetical order within the same group.)
  • other attributes. (Alphabetical order within the same group.)
  • bind: directives (other then bind:this), and on: directives.
  • use: directives. (Alphabetical order within the same group.)
  • transition: directive.
  • in: directive.
  • out: directive.
  • animate: directive.
  • let: directives. (Alphabetical order within the same group.)
<script>
  /* eslint svelte/sort-attributes: "error" */
</script>

<!-- ✓ GOOD -->
<svelte:component
  this={component}
  --style-props={color}
  bind:value={componentValue}
  on:changeValue={handleChange}
  bind:metaData
/>
<input
  bind:this={foo}
  id="foo"
  style="width: 150px;"
  style:color
  class="my-input"
  class:disable
  class:enable={!disable}
  bind:value={inputValue}
  use:action={parameters}
  transition:fn
  in:fn
  out:fn
  animate:name
/>
<slot name="content" {abc} {def} />

<!-- ✗ BAD -->
<svelte:component
  bind:value={componentValue}
  this={component}
  on:changeValue={handleChange}
  {def}
  data-foo
  {abc}
  bind:metaData
  --style-props={color}
/>
<input
  id="foo"
  bind:this={foo}
  style:color
  style="width: 150px;"
  class="my-input"
  class:enable={!disable}
  class:disable
  animate:name
  use:action
  transition:fn
  bind:value={inputValue}
  in:fn
  out:fn
/>
<slot name="content" {def} {abc} data-foo />

If there is a spread attribute between the attributes, it will not be reported as changing the order can change the behavior.

<script>
  /* eslint svelte/sort-attributes: "error" */
</script>

<!-- ✓ GOOD -->
<div c d {...attrs} a b />

<!-- ✗ BAD -->
<div d c {...attrs} b a />

🔧 Options

{
  "svelte/sort-attributes": [
    "error",
    {
      "order": [
        // `this` property.
        "this",
        // `bind:this` directive.
        "bind:this",
        // `id` attribute.
        "id",
        // `name` attribute.
        "name",
        // `slot` attribute.
        "slot",
        // `--style-props` (Alphabetical order within the same group.)
        { "match": "/^--/u", "sort": "alphabetical" },
        // `style` attribute, and `style:` directives.
        ["style", "/^style:/u"],
        // `class` attribute.
        "class",
        // `class:` directives. (Alphabetical order within the same group.)
        { "match": "/^class:/u", "sort": "alphabetical" },
        // other attributes. (Alphabetical order within the same group.)
        {
          "match": ["!/:/u", "!/^(?:this|id|name|style|class)$/u", "!/^--/u"],
          "sort": "alphabetical"
        },
        // `bind:` directives (other then `bind:this`), and `on:` directives.
        ["/^bind:/u", "!bind:this", "/^on:/u"],
        // `use:` directives. (Alphabetical order within the same group.)
        { "match": "/^use:/u", "sort": "alphabetical" },
        // `transition:` directive.
        { "match": "/^transition:/u", "sort": "alphabetical" },
        // `in:` directive.
        { "match": "/^in:/u", "sort": "alphabetical" },
        // `out:` directive.
        { "match": "/^out:/u", "sort": "alphabetical" },
        // `animate:` directive.
        { "match": "/^animate:/u", "sort": "alphabetical" },
        // `let:` directives. (Alphabetical order within the same group.)
        { "match": "/^let:/u", "sort": "alphabetical" }
      ]
    }
  ]
}
  • order ... Specify an array of your preferred attribute order. Array elements accept strings, string arrays, and objects.
    • String ... Specify the name or pattern of the attribute.
    • String array ... Specifies an array of the names or patterns of the attributes to be grouped. It will not be sorted within this same group.
    • Object ... Specifies an object with a definition for sorting within the same group.
      • match ... Specifies an array or string of the name or pattern of the attributes to be grouped.
      • sort ... Specify the sorting method. Currently, only "alphabetical" is supported.
        • "alphabetical" ... Sorts the attributes of the same group in alphabetical order.
        • "ignore" ... Attributes in the same group are not sorted.

Note that the behavior may change depending on how you specify the order setting.
For example, bind:value and on:input={() => console.log(value)} behave differently depending on the order. See https://svelte.dev/docs#template-syntax-element-directives-bind-property for details.
By default it is designed to be sorted safely.

You can use the following formats for names or patterns:

  • "foo" ... Matches only the foo attribute name.
  • "/foo/" ... Matches attribute names that match the /foo/ regex. That is, it matches the attribute name including foo.
  • "!foo" ... Exclude foo attribute from the matched attribute names. When used first in the array or alone, matches other than the foo attribute name.
  • "!/foo/" ... Excludes attributes that match the /foo/ regex from the matched attribute names. When used first in the array or alone, matches an attribute name that does not match the /foo/ regex.
  • ["style", "/^style:/u"] ... Matches the style attribute or the attribute name that matches the /^style:/u regex.
  • ["/^bind:/u", "!bind:this", "/^on:/u"] ... Matches an attribute name that matches /^bind:/u and other than bind:this, or an attribute name that matches /^on:/u.

{ order: [ /*See below*/ ] }

<script>
  /* eslint svelte/sort-attributes: ["error", {
    "order": [
      "id",
      "class",
      "/^class:/u",
      "value",
      "src",
      "/^data-/u",
      "style",
      "/^style:/u",
      "/^on:/u",
      "/^use:/u",
      "/^animate:/u",
      "/^transition:/u",
      "/^in:/u",
      "/^out:/u",
      "bind:this",
      ["/^bind:/u", "!bind:this"],
      {
        "match": ["!/:/u", "!/^(?:id|class|value|src|style)$/u", "!/^data-/u"],
        "sort": "alphabetical"
      },
    ]
  }] */
</script>

<!-- ✓ GOOD -->
<MyComponent data-foo bind:this={comp} bind:data {abc} {def} />
<input
  id="foo"
  class="my-block"
  class:bar
  value="abc"
  data-value="x"
  style="width: 30px;"
  style:color
  animate:name
  transition:fn
  in:fn
  out:fn
  bind:this={foo}
/>
<img id="bar" {src} alt="bar" />

<!-- ✗ BAD -->
<MyComponent bind:data bind:this={comp} {abc} {def} data-foo />
<input
  class:bar
  class="my-block"
  id="foo"
  bind:this={foo}
  value="abc"
  style:color
  style="width: 30px;"
  data-value="x"
  animate:name
  in:fn
  out:fn
  transition:fn
/>
<img alt="bar" {src} id="bar" />

🚀 Version

This rule was introduced in eslint-plugin-svelte v2.4.0

🔍 Implementation