Question

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

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

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

Answer 1

更新（2017-02）

Visual Studio的节点工具（NTVS）一直在使用Salsa分析引擎，因为v1.2和使用NTVS可能是JSX支持阻力最小的路径。

https://github.com/Microsoft/nodejstools

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

原始回答

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

解决方案1 

在ReSharper 10中：

打开选项对话框

代码编辑＆gt; JavaScript＆gt;检查在 JavaScript语言级别下拉列表中选择 ECMAScript 6
确保选择在.JS文件中启用JSX语法选项（假设您使用JSX语法）。

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

转到工具＆gt;选项＆gt;文本编辑器＆gt; JavaScript＆gt;智能感知

取消选中显示语法错误框，然后单击“确定”。

重新加载VS解决方案

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

我还应该提一下，javascript文件需要 .js 扩展名。如果你给他们 .jsx 扩展名，你的第一个导入语句就会出现红色波动。错误消息为JSX Parser: illegal import declaration。（这可以使用下面的解决方案＃2来修复）

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

在Visual Studio中，转到选项＆gt;文本编辑器＆gt;文件扩展名

添加 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中，转到工具＆gt;选项＆gt;文本编辑器＆gt; JavaScript＆gt;智能感知

取消选中显示语法错误框并退出

重要提示：重新启动Visual Studio。带有ES6代码的.jsx文件不应再在ES6代码上出现红色波形。

注意：

我不知道server.js文件解决方案2中列出的更改是否会影响非ES6代码。因此请自行承担风险。

此外，很可能/您的更改可能会被以后更新到Visual Studio所覆盖。

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

Answer 2

在安装的VS2015 Update-3和NTVS 1.2中，只需将 TypeScript Editor 设置为文件扩展名 jsx 的默认编辑器，就可以解决这个问题。

1）打开工具＆gt;选项＆gt;文字编辑器＆gt;文件扩展程序。

2）在Extension中输入 jsx ，选择 TypeScript Editor 作为编辑器，然后单击Apply。

Answer 3

修改： Visuals studio 15更名为Visual Studio 2017：你可以在这里获得RC：https://www.visualstudio.com/vs/visual-studio-2017-rc/

未来解决方案：

Visual Studio＆＃34; 15＆＃34;预览2支持JSX en React开箱即用。您可以启用与VS Code相同的（Salsa）Javascript服务库。

此处发布说明： 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

Answer 4

解决方案＆＃39; 3＆＃39;

感谢Adam在他的回答中的见解，我使用了babel及其插件/预设。如果你正在尝试这个，那么首先应该先阅读他的答案。

您需要先安装nodeJs和npm才能进一步修改，并在修改之前备份所有文件。

我在这里使用react，es2015插件stage1预设，但您可以使用您喜欢的任何plugins

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

安装以下软件包：

npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-stage-1 --save-dev

将依赖项添加到server.js

下面的childProcess

var childProcess = require('child_process'); //already there
var babel = require('babel-core');
var es2015 = require('babel-preset-es2015');
var react = require('babel-preset-react');
var stage1 = require('babel-preset-stage-1');

替换try{}catch{}函数中req.on('end'作业的transformJsxFromPost部分：

try {

    var transformed = 
        babel.transform(
            code, 
            {
                sourceMaps: true, 
                presets: [
                    es2015, 
                    react, 
                    stage1
                ]
            }
        );

    result = { 
        elementMappings: []
    }
    //I found it least buggy when returning an empty list of elementMappings
    //but i will leave the code i was using to try and dupe it, or 
    //recreate the elementMappings from react-tools
    //
    // result = { 
        // elementMappings: [{
            // 'start': 1,
            // 'end': transformed.code.length,
            // 'generatedCode': transformed.code
        // }], 
        // map: transformed.map, 
        // code: transformed.code
    // }
}
catch (e) {
    //the error that react-tools was returning was slightly different, so
    //map the babel error back to the react-tools error that VS 2015 expects
     result = {
         column: e.loc.column,
         description: e.errorMessage,
         errorMessage: e.message + ".. :-(",
         index: e.pos,
         lineNumber: e.loc.line
     };
}

重新启动visual studio，关闭并重新打开任何.jsx文件，并享受babel语法高亮： - ）

备注
启动后，解析器有机会启动，当您第一次加载到.jsx文件时，Visual Studio将执行以下操作：

在%localappdata%\Temp\中使用stderr.txt创建一个文件夹，您可以在其中找到任何错误的日志，stdout.txt将告诉您服务器正在运行的{port}以及记录其他信息。

启动一个nodeJs服务器，在localhost:{port}上运行，在/transformJsxFromPost上接受JSX作为POST，并将它遇到的第一个错误的行号和列号作为json对象返回到visual studio

我必须关闭jsx文件的javascript intellisense，正如Adam在他的回答中在解决方案1中所示：

在Visual Studio中，转到“工具”＆gt;选项＆gt;文本编辑器＆gt; JavaScript＆gt; 然后取消选中“显示语法错误”框并单击“确定”。

关闭javascript intellisense，反应服务器与vs和babel一起打包，因为我在这里替换它们只返回他们遇到的第一个错误，所以你不应该期望看到整个文件中的所有错误突出显示，但如果您保持代码没有错误，它们会在您键入时显示。

我想现在剩下要做的就是让elementMappings过度正确 - 解决方案4可能吗？： - ）

Answer 5

在尝试研究这个时，我意识到在所有版本的Visual Studio中使用jsx文件的简单方法。它并不完美但对我有用。

下载最新的Visual Studio代码[https://code.visualstudio.com/updates]，然后右键单击任何版本的Visual Studio中的jsx文件，并选择“打开方式...”。选择“添加”并浏览到最近下载的Visual Studio代码，并将其设为默认值。

希望能帮助人们担心升级。

Answer 6

上面的评论中提到了@TheQuickBrownFox，但默认情况下是隐藏的（需要展开才能看到它），所以总结了我在最新的Visual Studio 2015社区更新3中解决问题的方法：

100％来自解决方案1，由Adam Weber ：https://stackoverflow.com/a/34110461/1633913 （将ReSharper中的 JavaScript语言级设置为 ECMAScript 2016 ，并在同一窗口中选中启用JSX ... +禁用显示语法VS JavaScript IntelliSense选项中的错误）

Adam Weber的解决方案2 ：https://stackoverflow.com/a/34110461/1633913，但略有修改;您应该替换的目标文件：

这：app icon

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

确实在这里：var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

重启VS，你就完成了。

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

6 个答案: