Visual Studio 2015 JSX/ES2015语法高亮显示

Question

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

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

Answer 1

更新（2017-02）

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

https://github.com/microsoft/nodejstools

在ReSharper 10中：

• 打开选项对话框
• 在代码编辑>JavaScript>检查下，在JavaScript语言级别下拉选择ECMAScript 6
• 确保在.js files中启用JSX语法选项也被选中（假设您使用JSX语法）。
• 还需要禁用Visual Studio中的javascript语法错误，如下所示：
  • 转到工具>选项>文本编辑器>JavaScript>IntelliSense
  • 取消选中显示语法错误框并确定退出。

  重新加载解决方案后，红色的曲线为我消失了。但是，JSX的语法高亮显示不起作用。我在render函数中声明的任何元素的开头段都没有正确的颜色--但我很容易忽略这一点。

  我还应该提到javascript文件需要有。js扩展名。如果给他们.jsx扩展名，那么在第一个导入语句中就会出现红色曲线。错误消息将是JSX解析器：非法导入声明。（可以使用下面的解决方案#2来解决这个问题）

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

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

  C:\Program Files (x86)\Microsoft Visual Studio
  14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\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 Transformat=reactTools.TransformWithDetails（code,{elementMap：true}）；。这是对react-tools模块(https://www.npmjs.com/package/react-tools)的引用，该模块有更多解析ES6的选项。

  因此：

  >

• 替换此行：

  var Transform=ReactTools.TransformWithDetails（code,{elementMap：true,es6module：“--es6module”,harmony：“--harmony”}）；

  注意添加了--es6module和--harmony标志，它们指示react-tools将传入的代码视为es6。

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

  null

  重要提示：重新启动Visual Studio。具有ES6代码的.jsx文件在ES6代码上不应该再有红色弯曲。

  备注：

  • 我不知道解决方案2中概述的对server.js文件的更改是否会影响非ES6代码。所以实施风险自负。
  • 此外，您所做的更改很有可能被以后的Visual Studio更新覆盖。
  • 用Babel CLI代替react-server中的react-tools将会很酷/有趣。更新：多亏了@nickdewitt，他似乎能够做到这一点:https://stackoverflow.com/a/36321109/9324