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 }
/>

Badger

Answer 1

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

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

Orsola

The bracketSpacing option adds spacing only for import statements, it doesn't affect react code. – Badger

It adds spacing in any object literals. But yes, it does not affect react props. So i think this option does not exist. You can try to accomplish the same effect with ESLint auto-fix, but i think there is no rule for this either. – Orsola