ESLint Rule: Break nested JSX Elements into Multi Lines

Question

I'd like to configure my ESLint to automatically style my JSX Elements. Basically it should convert this:

<Link to={'operations'}><Button variant={'contained'}><i>Çalışmalar</i></Button></Link>

to this

<Link to={'groups'}>
  <Button variant={'contained'}>
    <i>Gruplar</i>
  </Button>
</Link>

I just can't seem to find the correct ESLint rule for it.

I have tried some rules like react/jsx-newline , but they are not what I'm looking for.

Answer 1

you can achive this with prettier .

install the extension in your VSCode then see here how to setup ESLINT and PRETTIER in React app