eslint-plugin-lodash-template

Appearance

lodash-template/attribute-name-casing ​

enforce HTML attribute name casing. (ex. 🆗 <div foo-bar> 🆖 <div fooBar> <div FOO-BAR>)

  • ⚙️ This rule is included in "plugin:lodash-template/recommended-with-html" and "plugin:lodash-template/all".
  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

Rule Details ​

This rule enforces attribute name casing style (kebab-case).

html
<% /* eslint "lodash-template/attribute-name-casing": "error" */ %>
<!-- ✓ GOOD -->
<div foo-bar="abc">

<!-- ✗ BAD -->
<div 
fooBar
="abc">
<div 
FOO-BAR
="abc">

Options ​

json
{
  "lodash-template/attribute-name-casing": ["error", {
    "ignore": [],
    "ignoreSvgCamelCaseAttributes": true,
  }]
}

Examples for this rule with "ignore": ["onClick"] option: ​

html
<% /* eslint "lodash-template/attribute-name-casing": ["error", {"ignore": ["onClick"]}] */ %>
<!-- ✓ GOOD -->
<div onClick="abc">

Examples for this rule with "ignoreSvgCamelCaseAttributes": true, (default) ​

html
<% /* eslint "lodash-template/attribute-name-casing": ["error", {"ignoreSvgCamelCaseAttributes": true}] */ %>
<!-- ✓ GOOD -->
<svg viewBox="0 0 100 100"></svg>

Further Reading ​

Implementation ​