Configure Prettier Whitespaces in React Typescript

Question

I use prettier for formatting my code. How can I configure prettier to add a space depending on curly braces in react code?

Current code:

<AdminPanel
    theme={myTheme}
    dataProvider={dataProvider}
    authProvider={authProvider}
    history={history}
/>

Expected result:

<AdminPanel
    theme={ myTheme }
    dataProvider={ dataProvider }
    authProvider={ authProvider }
    history={ history }
/>

Answer 1

The option bracket-spacing is what you are looking for: bracketSpacing: true.

https://prettier.io/docs/en/options.html#bracket-spacing