title: Visual Studio 2015 JSX/ES2015 syntax highlighting with babel
body: <p><strong>What i am tring to do:</strong></p>
  
  <p>Based on <a href="https://stackoverflow.com/a/34110461/1641172">this</a> answer, i am seeing if i can swap out the <code>react-tools</code> transformer for the <code>babel-core</code> transformer with presets for <code>react</code>, <code>es2015</code> and <code>stage-1</code>.</p>
  
  <p>VS2015 community uses react tools on a node server to transpile the code on the fly, the <code>nodeJs</code> <code>server.js</code> file is located at:</p>
  
  <p><code>C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server</code></p>
  
  <p>The following lines in the <code>transformJsxFromPost</code> function do the tranformation and return the <code>elementMap</code> to visual studio:</p>
  
  <pre><code>var transformed = reactTools.transformWithDetails(code, { elementMap: true });
  result = { elementMappings: transformed.elementMappings };
  </code></pre>
  
  <p>When you start VS, this creates a temp folder in your local app data and starts a node server at the following location:</p>
  
  <p><code>%localappdata%\Temp\{most-recent-generated-guid-folder}</code></p>
  
  <p><strong>Where i have got so far:</strong>
  The visual studio <code>External\react-tools\</code> folder has a <code>node_modules</code> folder, so i npm installed the following there:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Added the following to the top of the <code>server.js</code> file:</p>
  
  <pre><code>var babel = require('babel-core');
  </code></pre>
  
  <p>And replaced the lines in <code>transformJsxFromPost</code> mentioned above for the following lines:</p>
  
  <pre><code>var transformed = babel.transform(code, {sourceMaps: "inline"});
  result = { elementMappings: transformed.map };
  </code></pre>
  
  <p>At this stage, restart visual studio and it works, i get a sourceMap returned (admittedly not in the same format as the <code>react-tools</code> elementMap yet).</p>
  
  <p><strong>Where i am stuck:</strong>
  As soon as i try to get babel to use presets, i am getting errors. So when i change the first line to:</p>
  
  <pre><code>var transformed = babel.transform(code, {sourceMaps: "inline", presets: ['es2015', 'react', 'stage-1']});
  </code></pre>
  
  <p>I get the error:</p>
  
  <blockquote>
    <p>JSX Parser: Couldn't find preset \"es2015\" relative to directory
    \"C:\\Users\\</p>
  </blockquote>
  
  <p>The presets are all dependencies in the <code>package.json</code> 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? </p>