I am using the airbnb ESLint extension in my React project that forces me to format empty/void tags with a space in between: <br />.

However, WebStorm auto formatting (Prettier) changes this every time. I do not find JSX in the WebStorm Code Style settings (File > Settings > Code Style).

Is there a way I can change the JSX formatting settings of WebStorm? Could a .editorconfig file help?

I am using the airbnb ESLint extension in my React project that forces me to format empty/void tags with a space in between: <br />.

However, WebStorm auto formatting (Prettier) changes this every time. I do not find JSX in the WebStorm Code Style settings (File > Settings > Code Style).

Is there a way I can change the JSX formatting settings of WebStorm? Could a .editorconfig file help?

• javascript
• reactjs
• webstorm
• jsx

• Have you tried enabling ESLint? – Tholle Commented Aug 5, 2018 at 21:11
• Sure ESLint is enabled but that does not change how Webstorm formats the code, right? It just highlights the ESLint errors. I need a way to configure how Webstorm auto formats JSX code... – Andre Commented Aug 5, 2018 at 21:13
• 1 Eslint has a fix mand you should be able to use in Webstorm but I haven't tried it myself. – Tholle Commented Aug 5, 2018 at 21:16
• 1 Using ESLint --fix instead of prettier does not sound right but I will give it a shot. Thank you very much! – Andre Commented Aug 6, 2018 at 13:00
• Might be worth looking into. I don't have that much Webstorm experience. – Tholle Commented Aug 6, 2018 at 13:00

3 Answers 3

WebStorm own JSX formatting respects HTML code style preferences - in particular, to have your self-closing JSX tags formatted as <br />, you have to enable In empty tag in Settings | Editor | Code Style | HTML | Other, Spaces.

Prettier doesn't use WebStorm code preferences though... and it used to insert a space in empty tags on formatting, as far as I can tell (https://github./prettier/prettier/issues/1985)

I found the solution to my problem. It was actually just a HTML formatting thing and not related to JSX meaning that Webstorm will use the HTML formatting rules to style the JSX accordingly.

Files > Editor > Code Style > HTML under the option Spaces the checkbox In empty tag will style empty/void tags like the airbnb extensions want it to be.

For further styling rules, I will definelty have a look at prettierrc.json as suggested by @Ales Dostál.

You can add file ".prettierignore" to your project. You can set ignore all files to disable prettier.

But better way is using Prettier as primary tool for formating code. In file ".prettierrc.json" you can set custom settings.