Skip to content

template-sort-invocations.md

Latest commit

 

History

History
86 lines (58 loc) · 2.86 KB

template-sort-invocations.md

File metadata and controls

86 lines (58 loc) · 2.86 KB

ember/template-sort-invocations

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

Why use it?

The rule helps you standardize templates:

  • Component invocations
  • Helper invocations
  • Modifier invocations

By sorting things that are order-independent, you can more easily refactor code. In addition, sorting removes style differences, so you can review another person's code more effectively.

Tip

The --fix option for this rule doesn't preserve formatting. You can use prettier, prettier-plugin-ember-hbs-tag, and prettier-plugin-ember-template-tag to format templates in *.hbs, hbs tags, and <template> tags, respectively.

Examples

Components

When invoking a component, list things in the following order:

  1. Arguments
  2. Attributes
  3. Modifiers
  4. Splattributes

The order clearly shows how the component is customized more and more. Things are alphabetized within each group.

<Ui::Button
  @label='Submit form'
  @type='submit'
  data-test-button
  {{on 'click' this.doSomething}}
  ...attributes
/>

Note

In rare cases, the order of ...attributes can matter. Similarly, the order can matter when an ARIA attribute has multiple values.

Disable the rule per instance in either case.

Helpers

When invoking a helper, list the named arguments in alphabetical order.

{{t
  'my-component.description'
  installedOn=this.installationDate
  packageName='ember-source'
  packageVersion='6.0.0'
}}

Modifiers

Similarly to helpers, list the named arguments in alphabetical order.

Limitations

It's intended that there are no options for sorting. Alphabetical sort is the simplest for everyone to understand and to apply across different projects. It's also the easiest to maintain.

To better meet your needs, consider creating a plugin for ember-template-lint.

Known issues

1. If you passed an empty string as an argument's value, it has been replaced with {{""}}. Let ember-template-lint fix the formatting change.

- <MyComponent @description={{""}} />
+ <MyComponent @description="" />

2. Comments such as {{! @glint-expect-error }} may have shifted. Move them to the correct location.

References

Source code and tests were copied from ember-codemod-sort-invocations.