Visual Studio 2015 JSX/ES2015 syntax highlighting with babel

Question

What i am tring to do:

Based on this answer, i am seeing if i can swap out the react-tools transformer for the babel-core transformer with presets for react, es2015 and stage-1.

VS2015 community uses react tools on a node server to transpile the code on the fly, the nodeJs server.js file is located at:

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

The following lines in the transformJsxFromPost function do the tranformation and return the elementMap to visual studio:

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

When you start VS, this creates a temp folder in your local app data and starts a node server at the following location:

%localappdata%\Temp\{most-recent-generated-guid-folder}

Where i have got so far: The visual studio External\react-tools\ folder has a node_modules folder, so i npm installed the following there:

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

Added the following to the top of the server.js file:

var babel = require('babel-core');

And replaced the lines in transformJsxFromPost mentioned above for the following lines:

var transformed = babel.transform(code, {sourceMaps: "inline"});
result = { elementMappings: transformed.map };

At this stage, restart visual studio and it works, i get a sourceMap returned (admittedly not in the same format as the react-tools elementMap yet).

Where i am stuck: As soon as i try to get babel to use presets, i am getting errors. So when i change the first line to:

var transformed = babel.transform(code, {sourceMaps: "inline", presets: ['es2015', 'react', 'stage-1']});

I get the error:

JSX Parser: Couldn't find preset \"es2015\" relative to directory \"C:\\Users\\

The presets are all dependencies in the package.json file in the react-server folder, and it's not having any issues with babel, so why is it looking in the temp directory for the plugin?

Unknown Unknown · Accepted Answer · 2016-03-30T22:56:11

I had to pass the actual presets to the function in this case instead of importing them and passing their name by string like in webpack.

I added the following imports:

var es2015 = require('babel-preset-es2015');
var react = require('babel-preset-react');
var stage1 = require('babel-preset-stage-1');

and changed

presets: ['es2015', 'react', 'stage1']

to

presets: [es2015, react, stage1]

I have added an answer here to a similar question.

Visual Studio 2015 JSX/ES2015 syntax highlighting with babel

1 Answers