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.Squiggles 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.

Increased Productivity

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

One thing that popped up for me immediately after switching to Visual Studio for editing JSX was tabs and spacing. We usually adopt a tab size of two for our JavaScript and HTML at Skookum, but good ole VS was trying to make everything tabbed to four spaces. Which is not that big of a deal, until you insert something like a } to close a function and you see the whole thing get retabbed by Visual Studio. So go in under Tools -> Options -> Text Editor -> JavaScript and update your tabs/indent size to your preference.

Webpack as an external command

I am also using webpack on this project to bundle our React/JavaScript and styles. So to keep from having to open a command prompt to start up webpack, the webpack team has some awesome documentation on how to wire up webpack as an external command in Visual Studio. This works really well, and saves a ton of time of switching back and forth from the command line.

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.