Visual Studio editing of JSX

Question

I am using Visual Studio 2013 to build a website that uses React and JSX for the user interface. This all works fine but makes for a slow development environment because the .jsx files are treated as plain text. So no syntax highlighting and you cannot set break points to help debugging.

Is there a way to improve this experience or do I have to switch to another editor for the jsx files?

Answer 1

Two tricks I can recommend:

1) You can make Visual Studio display a .jsx file with javascript formatting. In Visual Studio open Tools > Options > Text Editor > File Extensions. Set extension to "jsx" and select the javascript editor and click "Add". You may need to close and reopen VS to see the changes. If you keep your render() method at the bottom of your .jsx file, it works pretty well.

2) Breakpoints: no, you can't add them ahead of time, but there is a workaround. When you run your web app in Visual Studio, a new folder opens up in your Solution Explorer window named "Script Documents." The code from your transformed .jsx files are joined together into this "script block" file. You can add breakpoints here after starting the web app in Visual Studio, once the web page has loaded.

Admittedly, these breakpoints are lost as soon as your stop the debugger. The next time you run your program, you have to set them again. But at least you can get your foot in the door.

If you want to break into the code that has already run before the web page is full loaded, add an alert("here"); command in the jsx just before the line you want to break into. Run the code, and when the popup appears, don't press OK. Switch to the VS debugger, add your breakpoint in the script block file, and then press the OK button. The code should stop immediately on your breakpoint.