attribute-indentation.md

attribute-indentation

This rule requires the positional params, attributes, and block params of the helper/component to be indented by moving them to multiple lines when the open invocation has more than 80 characters (configurable).

Examples

Forbidden

Non-Block form

{{employee-details firstName=firstName lastName=lastName age=age avatarUrl=avatarUrl}}

Block form

{{#employee-details firstName=firstName lastName=lastName age=age avatarUrl=avatarUrl as |employee|}}
  {{employee.fullName}}
{{/employee-details}}

Non-Block form (HTML)

<input disabled id="firstName" value={{firstName}} class="input-field first-name" type="text">

Block form (HTML)

<a href="https://www.emberjs.com" class="emberjs-home link" rel="noopener" target="_blank">Ember JS</a>

Allowed

Non-Block form

{{employee-details
  firstName=firstName
  lastName=lastName
  age=age
  avatarUrl=avatarUrl
}}

Non-Block form (open invocation < 80 characters)

{{employee-details firstName=firstName lastName=lastName}}

Non-Block form with Helper

{{if
  (or logout.isRunning (not session.isAuthenticated))
  "Logging Out..."
  "Log Out"
}}

Non-Block form with Helper unfolded

{{if
  (or
    logout.isRunning
    (not session.isAuthenticated)
  )
  "Logging Out..."
  "Log Out"
}}

Non-Block form (HTML)

<input
  disabled
  id="firstName"
  value={{firstName}}
  class="input-field first-name"
  type="text"
>

Block form

{{#employee-details
  firstName=firstName
  lastName=lastName
  age=age
  avatarUrl=avatarUrl
as |employee|
}}
  {{employee.fullName}}
{{/employee-details}}

Block form (as-indentation attribute)

{{#employee-details
  firstName=firstName
  lastName=lastName
  age=age
  avatarUrl=avatarUrl
  as |employee|
}}
  {{employee.fullName}}
{{/employee-details}}

Block form (open invocation < 80 characters)

{{#employee-details firstName=firstName lastName=lastName as |employee|}}
  {{employee.fullName}}
{{/employee-details}}

Block form (HTML)

<a
  href="https://www.emberjs.com"
  class="emberjs-home link"
  rel="noopener"
  target="_blank"
>
  Ember JS
</a>

Configuration

• boolean - true - Enables the rule to be enforced when the opening invocation has more than 80 characters or when it spans multiple lines.
• object - { 'indentation': n spaces } - Indentation length for attributes (defaults to 2).
• object - { 'open-invocation-max-len': n characters } - Maximum length of the opening invocation.
• object - { 'process-elements': true } - Also validate the indentation of HTML/SVG elements.
• object - { 'element-open-end': new-line|last-attribute } - Enforce the position of the closing brace > to be on a new line or next to the last attribute (defaults to new-line).
• object - { 'mustache-open-end': new-line|last-attribute } - Enforce the position of the closing braces }} to be on a new line or next to the last attribute (defaults to new-line).
• object - { 'as-indentation': attribute|closing-brace } - Enforce the position of the as |param| to be indented at the same level as closing brace or attribute (defaults to closing-brace).

Related Rules

• block-indentation
• eslint/max-len
• eslint/indent

References

• Google style guide/line wrapping