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>
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.