React native - eslintrc - prettierrc: how to prevent removing of parentheses around one element in JSX

Question

I just created new react-native app and the eslint change this:

return (
    <Component />
);

to

return <Component />;

I tried to change the .eslintrc and .prettierrc files and nothing worked.

Answer 1

In this response, I took as a statement that you were using eslint along with prettier, with the prettier extension and the prettier plugin within your .eslintrc, as well as the existence of rule "prettier/prettier": "error".

The error brought here comes from prettier, since the error is found like this:

Replace `(⏎······<Component·/>⏎····)` with `<Component·/>

However, there is no option in prettier to configure the behaviour on the changes you mentioned. Nonetheless, there exist some workarounds:

1) Disable the line causing the changes:

// eslint-disable-next-line prettier/prettier
return (
  <Component />
);

2) Use the option requirePragma, where you need to insert on top of every file you want prettier to watch the comment /**@format */. However this technique requires changes all over your files. Maybe not the best solution.

3) Use only eslint, since eslint doesn't consider this writing as an error by default. (or does not treat this case at all).

A question to ask; why want to keep the format with the parentheses? The changes take fewer lines, and the code remains readable.

Hope that it helped you in a way.