react/jsx-equals-spacing
Enforce or disallow spaces around the = of JSX attributes
fixable
name="email" and name = "email" mean the same thing. Using one style everywhere keeps props easy to scan. By default the rule doesn't allow a space on either side of the =.
--fix adds or removes the spaces.
Configure#
Off by default. To turn it on:
bunfig.toml
[lint.rules]
"react/jsx-equals-spacing" = "error" # or "warn"Every option, set to its default:
bunfig.toml
[lint.rules]
"react/jsx-equals-spacing" = ["error", "never"] # "always" or "never"Examples#
example.jsx2 problems
const field = <input name =There should be no space before =There should be no space after = "email" />;example.jsxNo problems
const field = <input name="email" required />;Options#
| Option | What it does |
|---|---|
"never" (default) | Don't allow a space before or after the =. |
"always" | Require a space before and after the =. |
example.jsxwith
"always"2 problemsconst field = <input name=A space is required before =A space is required after ="email" />;example.jsxwith
"always"No problemsconst field = <input name = "email" />;When not to use it#
A formatter such as bun fmt or Prettier already fixes this spacing.