How to set PHPStorm/WebStorm/IntelliJ IDEA to .jsx format?

Question

IntelliJ IDEA

How to set menu nesting in PHPStorm or WebStorm or IntelliJ IDEA in .jsx format after it is interpreted in .js+.map as CoffeeScript?
This is what CoffeeScript looks like in the IDE:

I want to set it up for the .jsx format the same way, but if the IDE understands CoffeeScript and it’s enough to install the appropriate npm package for intrapredication, then the .jsx format has to be processed in a gallop and the output is:

In fact, everything works correctly, I just want to change the appearance a little, so that there would be no superfluous and breakpoints for debugging could be set not in the map file, but in .jsx, like in CoffeeScript

Answer 1

I also faced a similar issue. I did this:
1. somewhere away from public-html (web-root) I created a js file in which I will write my jsx code
2. installed the FileWatchers link
plugin 3. installed globally via npm react-tools - after jsx tool will be available for this (I have Linux) link
4. created a watcher that monitors my created file and which generates a regular js file in webroot/js/app.jslink
5. included this generated file in my html page
6. when the IDE sees that the code similar to JSX it will prompt you to change the language level to JSX Harmony. (Perhaps I made mistakes in the code, but this is not so important)
You agree and after that you have the correct syntax display
you may have to reopen the file (I had to select all the code, cut it and paste it back)
as a result, periodically while you are writing the JSX code, the watcher watches the file generates the usual js code in the specified file
, the same watcher can be run with gulpa