更新 (2017-02)

Node Tools for Visual Studio (NTVS) 自 v1.2 以来一直使用 Salsa 分析引擎，使用 NTVS 可能是 JSX 支持阻力最小的途径。

https://github.com/Microsoft/nodejstools

阅读（并投票）此答案以获取更多详细信息：https : //stackoverflow.com/a/41996170/9324

原答案

我遇到了同样的问题并找到了两种解决方案 - 一种使用 ReSharper，一种修改 Visual Studio 外部 Web 工具。

解决方案 1

在 ReSharper 10 中：

• 打开选项对话框
• 在代码编辑 > JavaScript > 检查下，在JavaScript 语言级别下拉菜单中选择ECMAScript 6
• 确保在 .JS 文件中启用 JSX 语法选项也被选中（假设您使用 JSX 语法）。
• 您还需要在 Visual Studio 中禁用 javascript 语法错误，如下所示：
  • 转到工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense
  • 取消选中显示语法错误框并确定。
• 重新加载VS解决方案

重新加载解决方案后，红色波浪线对我来说消失了。但是，JSX 的语法突出显示不起作用。我在render函数中声明的任何元素的开头部分都没有正确的着色——但这对我来说很容易忽略。

我还应该提到 javascript 文件需要具有.js扩展名。如果你给他们.jsx扩展名，你会在你的第一个 import 语句中得到红色波浪线。错误消息将是JSX Parser: illegal import declaration。（这可以使用下面的解决方案#2 修复）

更新：感谢@SntsDev 提供的解决方法 有一种方法可以避免将.jsx文件命名为.js：

• 在 Visual Studio 中，转到选项 > 文本编辑器 > 文件扩展名
• 添加jsx并将其分配给Javascript 编辑器

解决方案2

好奇心战胜了我，我想探索是否有非 ReSharper 解决方案。Visual Studio 使用一个本地运行的节点服务器modulereact-server来动态解析 JSX。这个module可以在这里找到：

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

Visual Studio 2015 更新 3 的更新 感谢@TheQuickBrownFox的评论/更新。对于更新 3，react-server命令的位置现在在此文件中：

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

进一步检查上述文件夹中的server.js或react-commands.js文件，有一个名为transformJsxFromPostor的函数transformJsx。此方法包含以下行：var transformed = reactTools.transformWithDetails(code, { elementMap: true });. 这是对react-toolsmodule ( https://www.npmjs.com/package/react-tools )的引用，该module具有更多可用于解析 ES6 的选项。

所以：

• 替换这一行：

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

• 具有以下内容：

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

  请注意添加--es6module和--harmony标志，指示react-tools将传入代码视为 ES6。

• 在 Visual Studio 中禁用 javascript 语法错误，如下所示：

  • 在 Visual Studio 中，转到工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense
  • 取消选中显示语法错误框并确定

• 重要提示：重新启动 Visual Studio。你.jsx用ES6代码文件应该不会再有你的ES6代码红色波浪线。

笔记：

• 我不知道解决方案 2 中概述的server.js文件更改是否会影响非 ES6 代码。因此，实施风险自负。
• 此外，很可能/很可能您的更改可能会被 Visual Studio 的后续更新覆盖。
• 这将是酷/好玩替换使用的react-tools范围内react-server与巴贝尔CLI。更新：感谢@NickDewitt，他似乎能够完成这项工作：https : //stackoverflow.com/a/36321109/9324

在安装了 VS2015 Update-3 和 NTVS 1.2 时，只需将TypeScript Editor设置为文件扩展名jsx的默认编辑器就对我有用。

1) 打开工具>选项>文本编辑器>文件扩展名。

2）在Extension中输入jsx，编辑器选择TypeScript Editor，点击Apply。

编辑：Visuals Studio 15 更名为 Visual Studio 2017：您可以在此处获取 RC：https : //www.visualstudio.com/vs/visual-studio-2017-rc/

未来解决方案：

Visual Studio“15”预览版 2 支持开箱即用的 JSX en React。您可以启用与 VS Code 相同的 (Salsa) Javascript 服务库。

这里是发行说明：https : //www.visualstudio.com/en-us/news/releasenotes/vs15/vs15-relnotes

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

解决方案“3”：

感谢 Adam 在他的回答中的见解，我已经使用babel和它的插件/预设进行了这项工作。如果你正在尝试这个，值得先阅读他的回答。

在继续之前，您需要安装nodeJs和npm，并且可能在修改之前备份任何文件。

我在这里使用react , es2015插件和stage1预设，但你可以使用任何你喜欢的插件

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

2. 安装以下软件包：

   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. 将依赖添加到server.js下面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. 替换函数中赋值的try{}catch{}部分：req.on('end'transformJsxFromPost

   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. 重新启动 Visual Studio，关闭并重新打开任何 .jsx 文件并享受 babel 语法高亮:-)

注释
在您启动后给解析器一个启动的机会，当您第一次加载到 .jsx 文件时，visual studio 将执行以下操作：

1. 创建一个文件夹%localappdata%\Temp\与stderr.txt在那里你可以找到一个日志的任何错误和stdout.txt它会告诉你什么样{port}的服务器上运行，并且还记录等信息。
2. 启动一个 nodeJs 服务器，在localhost:{port}该服务器上运行接受 JSX 作为 POST/transformJsxFromPost并将遇到的第一个错误的行号和列号作为 json 对象返回给 Visual Studio

我不得不关闭 jsx 文件的 javascript 智能感知，正如 Adam 在解决方案 1 的回答中所示：

在 Visual Studio 中，转到工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense，然后取消选中显示语法错误框并确定。

关闭 javascript 智能感知后，与 vs 和 babel 一起打包的 react-server 都只返回它们遇到的第一个错误，因此您不应该期望在整个文件中看到所有错误的突出显示，但它们确实显示如果您保持代码无错误，则在您键入时启动。

我想现在剩下要做的就是elementMappings正确地结束 - 解决方案 4 也许？:-)

在尝试研究这一点时，我发现了一种在所有版本的 Visual Studio 中处理 jsx 文件的简单方法。它并不完美，但对我有用。

下载最新的 Visual Studio Code [ https://code.visualstudio.com/updates ]，然后在您拥有的任何版本的 Visual Studio 中右键单击一个 jsx 文件，然后选择“打开方式...”。选择“添加”并浏览到您最近下载的 Visual Studio Code 并将其设为默认值。

希望能帮助那些担心不得不升级的人。