Visual Studio 2015 JSX/ES2015 语法突出显示

如何使用 ES2015 代码在 Visual Studio 2015 for JSX 中获得正确的语法突出显示？

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

我刚刚更新到 Visual Studio 2015 Enterprise Update 1，但它仍然保持不变。

更新（2017-02）

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

https://github.com/Microsoft/nodejstools https://github.com/Microsoft/nodejstools

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

原答案

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

解决方案1

在 ReSharper 10 中：

• 打开Options dialog
• under 代码编辑 > JavaScript > 检查 choose ECMAScript 6 in the JavaScript 语言级别落下
• 确保在 .JS 文件中启用 JSX 语法选项也被选中（假设您使用 JSX 语法）。
• you also need to disable javascript syntax errors in Visual Studio as follows:
  • go to 工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense
  • 取消选中显示语法错误框并确定。
• 重新加载VS解决方案

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

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

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

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

解决方案2

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

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 or react-commands.js从上述文件夹中的文件，有一个名为transformJsxFromPost or transformJsx。该方法包含以下行：var transformed = reactTools.transformWithDetails(code, { elementMap: true });。这是参考react-tools模块 （https://www.npmjs.com/package/react-tools https://www.npmjs.com/package/react-tools），它有更多可用于解析 ES6 的选项。

所以：

• 替换这一行：

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

• 具有以下内容：

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

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

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

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

• 重要的：重新启动 Visual Studio。你的.jsx包含 ES6 代码的文件不应再在 ES6 代码上出现红色波浪线。

NOTES:

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