A Take on the New JSX Support in Visual Studio
I primarily do web development on Windows, so naturally I’m working in Visual Studio a lot. For well over a year now I’ve been building solutions with the ReactJS library using JSX, but there is virtually zero support for JSX in Visual Studio 2013 or below. For this reason I’ve been exploring text editors that have JSX plugins like atom. Coding in a text editor is fine for the most part, but I always feel like I have to implement some kind of glue (like a grunt task) to get me closer to the full, productive Visual Studio experience I am accustomed to.
JSX in Visual Studio 2015
It turns out, I am not the only one that was missing this functionality. It was actually the most voted-for feature ever on the web essentials user voice page. Microsoft must be listening to it’s user base, because the recent release of Visual Studio 2015 advertises JSX support out of the box. I wanted to try it out immediately, and after a big ole 10GB download and installation, I was ready. I opened a project I had previously worked on in my free time with React, and right out of the gate I had troubles. The first file had red squiggles underneath half of the code where there was HTML returned from a function. I was devastated. This is not what was advertised. I then opened another JSX file in the same project, but this one seemed to work. No squiggles and all the code looked like it was formatted and syntax highlighted as you would expect with JSX. What was going on? I have noticed there seems to be an issue of Visual Studio not recognizing a JSX file when it first starts up, which is what I think happened here. If you close that file, then reopen it, things seem to work fine (Intellisense and all the VS goodness is all there). So there are still some rough edges, but for the most part it works pretty well once you get past the initial JSX file not working correctly.
The experience of not having to leave Visual Studio to update my front-end code does wonders for my productivity. Simple things like adding a new a property to an API call and displaying that on the front-end are no longer an alt-tab battle between Visual Studio, atom, and the browser. I just hate it took this long for Visual Studio to get JSX support. So after working with some React and JSX projects in Visual Studio for the last couple of weeks, here are some lessons learned.
Better Tabs and Spacing
Webpack as an external command
Tips & Learnings
For when you do have to open the command line (like to run
npm install), there is a nice little Visual Studio plugin that helps with that also. Basically it allows you open a command prompt at the root of the project that you right click on. This helps to keep from having to navigate through the C or whatever drive to find you project to run a command.
Once you get past a couple of the quirks in Visual Studio and spruce it up with some plugins, the React/JSX experience is pretty good. I’m actually starting to prefer it over atom in my regular JSX editing day-to-day.