Visual Studio 2015 JSX/ES2015 babel 语法高亮

Question

我想做什么：

根据的回答，我正在查看是否可以将 react-tools 变压器换成带有 react、[=20= 预设的 babel-core 变压器] 和 stage-1.

VS2015 社区使用节点服务器上的 React 工具即时转换代码，nodeJs server.js 文件位于：

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

transformJsxFromPost 函数中的以下行进行转换，return 将 elementMap 转换为 visual studio：

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

当您启动 VS 时，这会在您的本地应用程序数据中创建一个临时文件夹，并在以下位置启动节点服务器：

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

到目前为止我的进展： visual studio External\react-tools\ 文件夹有一个 node_modules 文件夹，所以我 npm 在那里安装了以下内容：

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

将以下内容添加到 server.js 文件的顶部：

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

并将上面提到的 transformJsxFromPost 中的行替换为以下行：

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

在这个阶段，重新启动 visual studio 并且它起作用了，我得到一个 sourceMap returned（不可否认，格式与 react-tools elementMap 不同）。

我卡在哪里： 一旦我尝试让 babel 使用预设，我就会收到错误。所以当我将第一行更改为：

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

我收到错误：

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

presets都是在react-server文件夹下的package.json文件里的依赖，用babel也没有问题，为什么要在temp目录下找插件呢？

Answer 1

在这种情况下，我必须将实际预设传递给函数，而不是像在 webpack 中那样导入它们并通过字符串传递它们的名称。

我添加了以下导入：

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

并改变了

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

到

presets: [es2015, react, stage1]

我已经添加了一个类似问题的答案。

Visual Studio 2015 JSX/ES2015 babel 语法高亮

Visual Studio 2015 JSX/ES2015 syntax highlighting with babel

react-jsx

visual-studio-2015

babeljs