eslint react to format curly braces

Question

I can't find any react eslint rule to prettify the content between the curly braces

<div>
   {
              items.map(i => (<div>{i}</div>))
           }
</div>

It should look like this

<div>
  {
      items.map(i => (<div>{i}</div>))
  }
</div>

Answer 1

While it's not specific to React, the ESLint indent rule (https://eslint.org/docs/latest/rules/indent) also handles indentation in JSX.

It's not unfortunately not in eslint:recommended, so you need to enable it yourself in your configuration like so:

// .eslintrc.json
{
  // ... rest of your configuration
  "rules": {
    "indent": ["error"] // or "warn" if you prefer
  }
}

The default is 4-space indentation, but you can also set it to use 2 spaces ["error", 2] or tabs ["error", "tab"].

When it comes to formatting rather than actual code errors, I would recommend using Prettier or another tool specifically made for formatting, instead of ESLint. See this article by the ESLint team (https://typescript-eslint.io/linting/troubleshooting/formatting)

Stylistic rules are frozen - we won’t be adding any more options to stylistic rules. We’ve learned that there’s no way to satisfy everyone’s personal preferences, and most of the rules already have a lot of difficult-to-understand options. Stylistic rules are those related to spacing, conventions, and generally anything that does not highlight an error or a better way to do something. Update 2021-01-29: We clarified in the README that we will still support newly-added ECMAScript features.