Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Eslint react/jsx-one-expression-per-line: allow variables and JSX strings on the same line, but not elements

E.g. for this JSX:

<h1>
  Hi {name}
</h1>

The react/jsx-one-expression-per-line plugin wants it as:

<h1>
  Hi
  {' '}
  {name}
</h1>

or

<h1>
  {`Hi ${name}`}
</h1>

I think both of those are ugly. I want to allow the first example. However, I don't want to disable the plugin because I don't want to allow multiple elements on one line:

<p>hi</p><p>bye</p>

How would I do this?

like image 616
Leo Jiang Avatar asked Sep 14 '19 07:09

Leo Jiang


People also ask

Does ESLint work with JSX?

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins.

What is ${} in JSX?

The ${} is template literals.

Can we use JavaScript in React JS?

We are going to create a react application and include an external JavaScript library to ReactJS in three approaches. These are: Using react-script-tag Package. Using react-helmet Package.

What is ESLint in React JS?

ESlint is an open-source library that's commonly used by React developers to enforce rules about maintaining the code standard across the project. It's fully customizable so you can configure the desired rules yourself. Linintng your code can help you spot any would be bugs.


1 Answers

How about this?

const welcomeMessage = `Hi ${name}`;
<h1>
  {welcomeMessage}
</h1>
like image 152
Dhanraj Acharya Avatar answered Sep 19 '22 14:09

Dhanraj Acharya