问题:Visual Studio 2015 JSX/ES2015 语法高亮

如何在带有 ES2015 代码的 JSX 的 Visual Studio 2015 中获得正确的语法突出显示?

如果我删除import和export关键字,它工作正常:

我刚刚更新到 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://stackoverflow.com/a/41996170/9324

---

原始答案

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

解决方案 1

在 ReSharper 10 中:

• 打开选项对话框

• 在 Code Editing > JavaScript > Inspections 下,在 JavaScript language level 下拉菜单中选择 ECMAScript 6

• 确保 Enable JSX syntax in .JS files 选项也被选中(假设您使用 JSX 语法)。

• 您还需要在 Visual Studio 中禁用 javascript 语法错误,如下所示:

• 转到 **工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense **

*取消选中显示语法错误框并确定。

• 重载VS解决方案

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

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

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

• 在 Visual Studio 中,转到 Options > Text-editor > File Extension

• 添加jsx并分配给Javascript Editor

解决方案 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 的评论/更新。对于更新 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-server中react-tools的使用会很酷/很有趣。 **更新:**感谢@NickDewitt,他似乎能够完成这项工作:https://stackoverflow.com/a/36321109/9324