React Prettier - how to remove the prop brackets for string

Question

I have this component.

<ComponentA text='Text A'/>

When I save the file, the prettier will update the code to

<ComponentA text={'Text A'}/>

How can I disable this behaviour in prettier?

Answer 1

I don't think there is a proper way around this issue. The issue thread on Github was closed without a resolution. However, there are few workarounds

---

1.. Manually tell prettier to ignore line

You can use {/* prettier-ignore */} above each component where you want the prettier to ignore/skip formatting. (Opinion: Its very time-consuming and not scalable)

---

2.. Change the config

On the prettier config file, add below

jsxBracketSameLine: false

By default, this rule will check for and warn about unnecessary curly braces in both JSX props and children. For the sake of backwards compatibility, prop values that are JSX elements are not considered by default. Details here