Visual Studio 2015 JSX / ES2015 syntax highlighting

Question

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

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

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

Answer 1

UPDATE (2017-02)

Node Tools for Visual Studio (NTVS) use the Salsa parsing engine since v1.2, and using NTVS is most likely the least resistance to support JSX.

https://github.com/Microsoft/nodejstools

Read (and confirm) this answer for more details: stack overflow

---

ORIGINAL RESPONSE

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

SOLUTION 1

In ReSharper 10:

• open the Options dialog box
• Code Editing> JavaScript> Inspections, select ECMAScript 6 at the JavaScript level .
• make sure that the Enable JSX syntax in .JS files is selected (provided that you use the JSX syntax).
• you also need to disable javascript syntax errors in Visual Studio as follows:
  • go to Tools> Options> Text Editor> JavaScript> IntelliSense
  • clear the Show syntax errors check box and click OK.
• reload VS solution

After a reboot, the red squigglies disappeared for me. However, syntax highlighting for JSX does not work. The start segment of any elements declared in the render function does not have the correct coloring - but this is easy to ignore.

I should also mention that the .js extension is required for javascript files. If you give them the .jsx extension, you will get red squigglies in your first import statement. The error message will be JSX Parser: illegal import declaration . (This can be eliminated using solution No. 2 below)

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

• in Visual Studio go to Options> Text Editor> File Extension
• add jsx and assign it to the JavaScript Editor

SOLUTION 2

Curiosity got better than me, and I wanted to explore if there was a solution without a ReSharper solution. Visual Studio uses a locally managed node server called react-server to parse JSX. 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 to upgrade Visual Studio 2015 3 Thanks to @TheQuickBrownFox for 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 checking the server.js or react-commands.js file from the above folders (s), there is a function called transformJsxFromPost or transformJsx . This method contains the following line: var transformed = reactTools.transformWithDetails(code, { elementMap: true }); . This is a link to the react-tools module ( https://www.npmjs.com/package/react-tools ), which has more options for parsing ES6.

In this way:

• 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 , which instruct react-tools process 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 Show syntax errors and click OK

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

---

NOTES:

• I do not know if the change specified in DECISION 2 will affect the server.js file for code other than ES6. Therefore, implement at your own risk.
• In addition, it is quite possible / likely, your changes can be overwritten and then updated in Visual Studio.
• It would be great / fun to replace using react-tools inside react-server with the Babel CLI. UPDATE: Thanks to @NickDewitt, it looks like he was able to do the job: https://stackoverflow.com/a/312969/

Answer 2

In VS2015 Update-3 and NTVS 1.2, just installing the TypeScript Editor as the default editor for the jsx file extension helped.

1) Go to Tools> Options> Text Editor> File Extension .

2) Enter jsx in the Extension, select TypeScript Editor as the editor and click "Apply."

Answer 3

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

Future solution:

Visual Studio "15" Preview 2 supports JSX en React out of the box. You can enable the same (Salsa) Javascript Service, such as VS Code.

Here are 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

Answer 4

SOLUTION '3':

Thanks to the insight of Adam in his answer, I got this work with babel , and these are plugins / presets. You should first read his answer if you are trying to do this.

You need nodeJs and npm installed before moving on, and perhaps back up any files before modifying them.

I use react , es2015 plugins with stage1 presets here, but you can use any plugins you like

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

• 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 

• Add dependencies <<22> 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'); 

• Replace the try{}catch{} req.on('end' destination 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 }; } 

• Restart the visual studio, close and reopen any .jsx files and get the babel syntax highlight :-)

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

• Create a folder in %localappdata%\Temp\ using stderr.txt , where you can find the error log and stdout.txt , which tells you that the {port} server is running and also writes other information.
• Start the nodeJs server running on localhost:{port} , which accepts JSX as POST on /transformJsxFromPost and returns the line number and column number of the first error that it encounters as a json object for visual studio

I had to disable 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 Show Syntax Errors and OK.

If javascript intellisense is turned off, both the responsive server and packed with vs and babel, as I replace it, they return only the first error that they encounter, so you should not expect all errors in your file to be highlighted, but they appear, when you print, if you save the code without errors.

I think now everything remains to be done to get elementMappings in the right way - maybe solution 4 ? elementMappings

Answer 5

During the research, I realized a simple way to work with jsx files in all versions of Visual Studio. This is not perfect, but works for me.

Download the latest Visual Studio code [ https://code.visualstudio.com/updates ], then right-click the jsx file in any version of Visual Studio and select “Open with ...”. Choose “Add” and view the recently downloaded code. Visual Studio and do it by default.

Hope this helps people worry about the need for updates.

Answer 6

It is mentioned in the comments above @TheQuickBrownFox, but it is hidden by default (you need to expand everything to see it), so summarizing what I did to fix the problem in the last update of the Visual Studio 2015 3 community:

100% of Solution 1 from Adam Weber : https://stackoverflow.com/a/168268/2128 (Set JavaScript Language Level ) in ReSharper before ECMAScript 2016 and check the Enable JSX ... box in the same window + disable Show error syntax in options VS JavaScript IntelliSense)

Decision 2 from Adam Weber : https://stackoverflow.com/a/316616/2/2/2/2/2/2/2/2/2/2/2/2/2/2/2/2/2/2/2/2/3/2/3/2/3/2/3/3/3/3/3/3/3/3/3/3/3163#2333 the target file you should replace with:

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

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

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

restart VS and you're done.