Skip to content

template-no-jsx-attributes.md

Latest commit

 

History

History
80 lines (65 loc) · 1.75 KB

template-no-jsx-attributes.md

File metadata and controls

80 lines (65 loc) · 1.75 KB

ember/template-no-jsx-attributes

💼 This rule is enabled in the following configs: strict-gjs, strict-gts.

🔧 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:

<div className='foo'></div>
<div contentEditable='true'></div>
<img srcSet='image.jpg 1x, [email protected] 2x' />

This rule allows the following:

<div class='foo'></div>
<div contenteditable='true'></div>
<img srcset='image.jpg 1x, [email protected] 2x' />

References