Skip to content

template-no-jsx-attributes.md

Latest commit

 

History

History
93 lines (75 loc) · 1.99 KB

template-no-jsx-attributes.md

File metadata and controls

93 lines (75 loc) · 1.99 KB

ember/template-no-jsx-attributes

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

Disallows JSX-style camelCase attributes in templates.

Folks coming from React may have developed habits around how they type attributes on elements. JSX isn't HTML (it's JS), so in JS, you can't have kebab-case identifiers, so JSX uses camelCase.

However, since Ember uses HTML, camelCase attributes are not valid when writing components.

Examples

This rule forbids the following attributes:

  • acceptCharset
  • accessKey
  • allowFullScreen
  • allowTransparency
  • autoComplete
  • autoFocus
  • autoPlay
  • cellPadding
  • cellSpacing
  • charSet
  • className
  • contentEditable
  • contextMenu
  • crossOrigin
  • dataTime
  • encType
  • formAction
  • formEncType
  • formMethod
  • formNoValidate
  • formTarget
  • frameBorder
  • httpEquiv
  • inputMode
  • keyParams
  • keyType
  • noValidate
  • marginHeight
  • marginWidth
  • maxLength
  • mediaGroup
  • minLength
  • radioGroup
  • readOnly
  • rowSpan
  • spellCheck
  • srcDoc
  • srcSet
  • tabIndex
  • useMap

This rule forbids the following:

<template>
  <div className='foo'></div>
  <div contentEditable='true'></div>
  <img srcSet='image.jpg 1x, image@2x.jpg 2x' />
</template>

This rule allows the following:

<template>
  <div class='foo'></div>
  <div contenteditable='true'></div>
  <img srcset='image.jpg 1x, image@2x.jpg 2x' />
</template>

Migration

Convert attributes to kebab-case1

  • <div className="..."> -> <div class="...">
  • <video autoPlay> -> <video auto-play>
  • <div contentEditable> -> <div content-editable>
  • etc

References

Footnotes

  1. keep in mind that @args, and <:blocks> should be js-compatible identifiers and be camelCase ↩