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

Question

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



如果删除import和export关键字，效果很好:


我刚刚更新到Visual Studio 2015企业更新1，但仍然保持不变。

Answer 1

更新(2017-02)

自v1.2以来，Visual Studio节点工具(NTVS)一直在使用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 下拉

确保还选择了.tt文件中的启用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使用名为react-server的本地运行的节点服务器模块来动态解析JSX。该模块可以在这里找到:

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

Visual Studio 2015 Update 3的更新
感谢 @TheQuickBrownFox 的评论/更新。
对于Update 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 Studio中的javascript语法错误，如下所示:

在Visual Studio中的

，请转到工具>选项>文本编辑器> JavaScript> IntelliSense

取消选中显示语法错误框，然后退出

重要:重新启动Visual Studio。带有ES6代码的.jsx文件应该不再在ES6代码上带有红色花样。

注意:

我不知道解决方案2中概述的对server.js文件的更改是否会影响非ES6代码。因此，实现风险自负。

此外，很有可能/您的更改可能会在以后对Visual Studio的更新中被覆盖。

用Babel CLI替换react-tools中react-server的使用很酷/很有趣。 更新:由于@NickDewitt，他似乎能够完成这项工作:https://stackoverflow.com/a/36321109/9324