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

Question

如何使用ES2015代码在VisualStudio2015forJSX中获得正确的语法高亮显示？

​

​

如果删除import和export关键字，它可以正常工作：

​

我刚刚更新到Visual 2015企业更新1，但它仍然是一样的。

Answer 1

更新(2017-02)

( NTVS )从v1.2开始就一直使用Salsa分析引擎，使用NTVS可能是JSX支持的阻力最小的路径。

https://github.com/Microsoft/nodejstools

要了解更多细节，请阅读(并向上投票)这个答案：https://stackoverflow.com/a/41996170/9324

原始答案

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

解决方案1

在ReSharper 10中：

• 打开Options对话框
• 在代码编辑> JavaScript >下，选择JavaScript语言级别中的ECMAScript 6
• 确保还选择了启用.JS文件中的JSX语法选项(假设您使用JSX语法)。
• 您还需要禁用Visual中的javascript语法错误，如下所示：
  • 转到工具>选项>文本编辑器> JavaScript > IntelliSense
  • 取消选中显示语法错误框和OK out。

​

• 重新加载VS解决方案

重新装完溶液后，红色的杂碎就为我消失了。但是，针对JSX的语法高亮显示不起作用。我在render函数中声明的任何元素的开头部分都没有正确的着色，但这对我来说很容易忽略。

我还应该提到，javascript文件需要有.js扩展名。如果给它们提供.jsx扩展，那么您的第一个导入语句就会出现红色的问题。错误消息将是JSX Parser: illegal import declaration。(这可以使用下面的解决方案#2来解决)

更新:感谢@SntsDev来解决问题，有一种方法可以避免将.jsx文件命名为.js

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

解决方案2

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

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

由于注释/更新的@TheQuickBrownFox，Visual 2015年更新3。对于更新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文件，有一个名为transformJsxFromPost或transformJsx的函数。此方法包含以下行：var transformed = reactTools.transformWithDetails(code, { elementMap: true });。这是对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和--harmony标志，它们指示react-tools将传入的代码视为ES6。
• 禁用Visual中的javascript语法错误，如下所示：

- in Visual Studio, go to **Tools > Options > Text Editor > JavaScript > IntelliSense**
- uncheck the **Show syntax errors** box and OK out

​

• 重要：重新启动Visual。使用.jsx代码的ES6文件不应该在ES6代码上有红色的设置。

备注：

• 我不知道server.js文件的解决方案2中概述的更改是否会影响非ES6代码。所以你要承担自己的风险去实现。
• 而且，您的更改很有可能/很可能会被稍后的Visual更新所覆盖。
• 用Babel取代react-tools在react-server中的使用会很酷/很有趣。更新：感谢@NickDewitt，看来他能够完成这个工作：https://stackoverflow.com/a/36321109/9324

Answer 2

在VS2015更新-3和NTVS1.2安装中，只需将TypeScript编辑器设置为文件扩展名jsx的默认编辑器就可以了。

1)开放Tools>Options>Text Editor>File扩展。

2)在扩展中键入jsx，选择TypeScript Editor作为编辑器，然后单击Apply。

​

​

Answer 3

编辑：可视化工作室15被重命名为VisualStudio2017:您可以在这里获得RC：https://www.visualstudio.com/vs/visual-studio-2017-rc/

未来解决方案：

Visual "15“预览2支持JSX的即时反应。您可以启用相同(Salsa) Javascript服务库，如VS代码。

在这里发布说明：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