Visual Studio 2015 JSX/ES2015 syntax highlighting

How can I get a proper syntax highlighting in Visual Studio 2015 for JSX with ES2015 code?

It works fine if I remove the import and export keywords:

I just updated to Visual Studio 2015 Enterprise Update 1 but it still remains the same.

UPDATE (2017-02)

Node Tools for Visual Studio (NTVS) has been using the Salsa analysis engine since v1.2 and using NTVS is likely the path of least resistance for JSX support.

https://github.com/Microsoft/nodejstools

Read (and upvote) this answer for more details: https://stackoverflow.com/a/41996170/9324

---

ORIGINAL ANSWER

I ran into the same issue and found two solutions - one using ReSharper and one modifying Visual Studio external web tools.

SOLUTION 1

In ReSharper 10:

• open the Options dialog
• under Code Editing > JavaScript > Inspections choose ECMAScript 6 in the JavaScript language level drop down
• ensure the Enable JSX syntax in .JS files option is selected as well (assuming you use JSX syntax).
• you also need to disable javascript syntax errors in Visual Studio as follows:
  • go to Tools > Options > Text Editor > JavaScript > IntelliSense
  • uncheck the Show syntax errors box and OK out.
• reload the VS solution

After reloading the solution, the red squigglies were gone for me. However, the syntax highlighting for JSX doesn't work. The opening segment of any elements I declare in the render function don't have the proper coloring - but that's easy for me to ignore.

I should also mention that the javascript files need to have .js extension. If you give them .jsx extension, you'll get red squigglies on your first import statement. The error message will be JSX Parser: illegal import declaration. (This can be fixed using solution #2 below)

UPDATE: thanks to @SntsDev for this workaround There is a way to avoid naming the .jsx files as .js:

• in Visual Studio, go to Options > Text-editor > File Extension
• add jsx and assign it to Javascript Editor

SOLUTION 2

Curiosity got the better of me and I wanted to explore whether or not there was a non-ReSharper solution. Visual Studio uses a locally running node server module named react-server to parse JSX on the fly. This module can be found here:

C:\Program Files (x86)\Microsoft Visual Studio
14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server

UPDATE for Visual Studio 2015 Update 3 Thanks to @TheQuickBrownFox for the comment/update. For Update 3, the location of the react-server commands is now in this file:

C:\Program Files (x86)\Microsoft Visual Studio 
14.0\Web\External\vs-task-server\react-commands.js

Further examining the server.js or react-commands.js file from the aforementioned folder(s), there is a function named transformJsxFromPost or transformJsx. This method contains the following line: var transformed = reactTools.transformWithDetails(code, { elementMap: true });. This is a reference to the react-tools module (https://www.npmjs.com/package/react-tools), which has more options available for parsing ES6.

Therefore:

• replace this line:

  var transformed = reactTools.transformWithDetails(code, { elementMap: true });

• with the following:

  var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

  Note the addition of the --es6module and --harmony flags, which instruct react-tools to treat the incoming code as ES6.

• disable javascript syntax errors in Visual Studio as follows:

  • in Visual Studio, go to Tools > Options > Text Editor > JavaScript > IntelliSense
  • uncheck the Show syntax errors box and OK out

• IMPORTANT: restart Visual Studio. Your .jsx files with ES6 code should no longer have red squiggles on your ES6 code.

---

NOTES:

• I don't know if the change outlined in SOLUTION 2 to the server.js file will impact non-ES6 code. So implement at your own risk.
• Also, it's quite possible/likely your change could get overwritten with a later update to Visual Studio.
• It would be cool/fun to replace the use of react-tools within react-server with Babel CLI. UPDATE: Thanks to @NickDewitt, seems he was able to make this work: https://stackoverflow.com/a/36321109/9324

In VS2015 Update-3 and NTVS 1.2 installed, simply setting TypeScript Editor as the default editor for file extension jsx did the trick for me.

1. Open Tools>Options>Text Editor>File Extension.

2. Type jsx in Extension, select TypeScript Editor as Editor, and click Apply.

EDIT: Visuals studio 15 is renamed to Visual Studio 2017: you can get the RC over here: https://www.visualstudio.com/vs/visual-studio-2017-rc/

Future Solution:

Visual Studio "15" Preview 2 support JSX en React out of the box. You can enable the same (Salsa) Javascript Service library like VS Code.

Here the release notes: https://www.visualstudio.com/en-us/news/releasenotes/vs15/vs15-relnotes

Salsa: https://github.com/Microsoft/TypeScript/wiki/Using-the-Salsa-Preview-in-Visual-Studio-15-Preview

SOLUTION '3':

Thanks to the insights from Adam in his answer, I have got this working with babel and it's plugins/presets. It's worth reading his answer first if you are trying this.

You need nodeJs and npm installed before you go any further, and maybe back up any files before you modify them.

I am using react, es2015 plugins with stage1 presets here, but you can use whatever plugins you like

1. Powershell to C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server

2. Install the following packages:

    npm install babel-core --save-dev
    npm install babel-preset-es2015 --save-dev
    npm install babel-preset-react --save-dev
    npm install babel-preset-stage-1 --save-dev
   

3. Add the dependencies to server.js below childProcess

    var childProcess = require('child_process'); //already there
    var babel = require('babel-core');
    var es2015 = require('babel-preset-es2015');
    var react = require('babel-preset-react');
    var stage1 = require('babel-preset-stage-1');
   

4. Replace the try{}catch{} section of the req.on('end' assignment in the transformJsxFromPost function:

    try {
    	
    	var transformed = 
    		babel.transform(
    			code, 
    			{
    				sourceMaps: true, 
    				presets: [
    					es2015, 
    					react, 
    					stage1
    				]
    			}
    		);
    		
    	result = { 
    		elementMappings: []
    	}
    	//I found it least buggy when returning an empty list of elementMappings
    	//but i will leave the code i was using to try and dupe it, or 
    	//recreate the elementMappings from react-tools
    	//
    	// result = { 
    		// elementMappings: [{
    			// 'start': 1,
    			// 'end': transformed.code.length,
    			// 'generatedCode': transformed.code
    		// }], 
    		// map: transformed.map, 
    		// code: transformed.code
    	// }
    }
    catch (e) {
    	//the error that react-tools was returning was slightly different, so
    	//map the babel error back to the react-tools error that VS 2015 expects
    	 result = {
    		 column: e.loc.column,
    		 description: e.errorMessage,
    		 errorMessage: e.message + ".. :-(",
    		 index: e.pos,
    		 lineNumber: e.loc.line
    	 };
    }
   

5. Restart visual studio, close and re-open any .jsx files and enjoy babel syntax highlighting :-)

Notes
Give the parser a chance to kick in after you start, visual studio will do the following when you load into a .jsx file the first time:

1. Create a folder in %localappdata%\Temp\ with stderr.txt where you can find a log of any errors and stdout.txt which will tell you what {port} the server is running on and also logs other info.
2. Start a nodeJs server, running on localhost:{port} which accepts JSX as a POST on /transformJsxFromPost and returns the line number and column number of the first error it encounters as a json object to visual studio

I had to turn off javascript intellisense for jsx files as Adam shows in solution 1 in his answer:

> In Visual Studio, go to Tools > Options > Text Editor > JavaScript > > IntelliSense, then uncheck the Show syntax errors box and OK out.

With javascript intellisense off, both react-server as packaged with vs and babel as i am replacing it here both only return the first error they encounter, so you shouldn't expect to see highlighting on all errors throughout your file, but they do show up as you type if you keep your code error free.

I guess now all is left to do is get the elementMappings over properly - solution 4 maybe? :-)

Whilst trying to research this I realised a simple way to work with jsx files in all versions of Visual Studio. It's not perfect but works for me.

Download the latest Visual Studio Code [ https://code.visualstudio.com/updates ] then right click a jsx file within whatever version of Visual Studio you have and select 'Open With...'. Select 'Add' and browse to your recently downloaded Visual Studio Code and make this your default.

Hope that helps people worrying about having to upgrade.

[1]: https://code.visualstudio.com/updates "Visual Studio Code"

It is mentioned in the comments above by @TheQuickBrownFox, but hidden by default (needed to expand all to see it), so summarizing what I did to fix the issue in the latest Visual Studio 2015 Community Update 3:

100% from Solution 1 by Adam Weber: https://stackoverflow.com/a/34110461/1633913 (setting JavaScript Language Level in ReSharper to ECMAScript 2016, and check Enable JSX ... in the same window + disabling Show syntax errors in VS JavaScript IntelliSense options)

Solution 2 by Adam Weber: https://stackoverflow.com/a/34110461/1633913, but slightly modified; the target file where you should replace:

this: var transformed = reactTools.transformWithDetails(code, { elementMap: true });

with this: var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

is indeed here: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\vs-task-server\react-commands.js

restart VS and you're done.