modifier-name-case.md

modifier-name-case

💅 The extends: 'stylistic' property in a configuration file enables this rule.

🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

It is currently possible to invoke a modifier with multiple words in its name using camelCase: {{didInsert}} or using dasherized-case: {{did-insert}}. This means that you can potentially have a lot of inconsistency throughout your codebase.

This rule enforces that you will always use the dasherized-case form of the modifier invocation.

Examples

This rule forbids the following:

<div {{didInsert}}></div>
<div {{(if @isContentEditable (modifier "contentEditable"))}}></div>

This rule allows the following:

<div {{did-insert}}></div>
<div {{(if @isContentEditable (modifier "content-editable"))}}></div>

References

• Documentation for modifiers
• Polyfill for the on modifier (needed below Ember 3.11)
• Spec for the on modifier
• Spec for the action modifier