ESLint Stylistic

Appearance

jsx-function-call-newline ​

Enforce line breaks before and after JSX elements when they are used as arguments to a function.

Rule Details ​

This rule checks whether a line break is needed before and after all JSX elements that serve as function arguments.

Options ​

There are the possible configurations:

  • always: Each JSX element as an argument has a line break before and after it.
  • multiline(default): Only line break are added before and after a JSX element when there is a newline present within the element itself.

always ​

Examples of incorrect code for this rule, when configured with "always":

jsx
/* eslint @stylistic/jsx-function-call-newline: ["error", "always"] */  fn(
<div />
)  fn(
<span>foo</span>
)  fn(
<span>
 bar </span>)  fn(
<div />
, 
<div
   style={{ color: 'red' }}   />, 
<p>baz</p>
)
incorrect

Examples of correct code for this rule, when configured with "always":

jsx
/* eslint @stylistic/jsx-function-call-newline: ["error", "always"] */  fn(   <div /> )  fn(   <span>foo</span> ) fn(   <span>     bar   </span> )  fn(   <div />,   <div     style={{ color: 'red' }}   />,   <p>baz</p> )
correct

multiline ​

Examples of incorrect code for this rule, when configured with "multiline":

jsx
/* eslint @stylistic/jsx-function-call-newline: ["error", "multiline"] */  fn(
<div
  />, 
<span>
  foo</span> )  fn (   <div />, 
<span>
     bar   </span> )
incorrect

Examples of correct code for this rule, when configured with "multiline":

jsx
/* eslint @stylistic/jsx-function-call-newline: ["error", "multiline"] */  fn(<div />)  fn(<span>foo</span>)  fn(   <div  />,  <span>  foo</span> )  fn (   <div />,   <span>     bar   </span> )
correct

When Not To Use It ​

If you are not using JSX then you can disable this rule.