Visual Studio 2015 JSX/ES2015 语法高亮

Question

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

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

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

Answer 1

更新 (2017-02)

Visual Studio 的节点工具 (NTVS) 自 v1.2 以来一直在使用 Salsa 分析引擎，使用 NTVS 可能是 JSX 支持阻力最小的途径。

https://github.com/Microsoft/nodejstools

阅读（并点赞）此答案以获取更多详细信息：

原始答案

我运行遇到了同样的问题并找到了两种解决方案 - 一种使用 ReSharper，另一种修改 Visual Studio 外部网络工具。

解决方案 1

在 ReSharper 10 中：

打开选项对话框
在代码编辑 > JavaScript > 检查 中选择 ECMAScript 6 JavaScript 语言水平 下拉
确保在 .JS 文件中启用 JSX 语法 选项也被选中（假设您使用 JSX 语法）。
您还需要禁用 Visual Studio 中的 javascript 语法错误，如下所示：
- 转到 工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense
- 取消选中显示语法错误框并确定。
重新加载 VS 解决方案

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

我还应该提到 javascript 文件需要有 .js 扩展名。如果你给它们 .jsx 扩展名，你会在你的第一个导入语句中得到红色波浪线。错误消息将是 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 更新 3 感谢 @TheQuickBrownFox 的 comment/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。
禁用javascript语法错误Visual Studio如下：
- 在 Visual Studio 中，转到 工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense
- 取消选中显示语法错误框并确定
重要提示： 重新启动 Visual Studio。带有 ES6 代码的 .jsx 文件在 ES6 代码上不应再有红色波浪线。

注释：

我不知道解决方案 2 中概述的对 server.js 文件的更改是否会影响非 ES6 代码。因此，实施风险自负。
此外，possible/likely 您的更改可能会被稍后更新为 Visual Studio 的内容覆盖。
cool/fun 将 react-server 中的 react-tools 替换为 Babel CLI。 更新：感谢@NickDewitt，看来他能够完成这项工作：

Answer 2

解决方案“3”：

感谢 Adam 在他的回答中的见解，我已经使用 babel 进行了此操作，它是 plugins/presets。如果你正在尝试这个，值得先阅读他的回答。

您需要先安装 nodeJs and npm，然后再进行下一步操作，并可能在修改文件之前备份它们。

我在用react, es2015 plugins with stage1 presets here, but you can use whatever 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

在childProcess

下面的server.js添加依赖

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');

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

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 语法高亮:-)

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

在 %localappdata%\Temp\ 中创建一个包含 stderr.txt 的文件夹，您可以在其中找到所有错误的日志，stdout.txt 会告诉您 {port} 服务器是什么运行并记录其他信息。
启动一个 nodeJs 服务器，运行 on localhost:{port} 它接受 JSX 作为 /transformJsxFromPost 上的 POST 和 returns 行号和列号它遇到的第一个错误作为 json 对象到 visual studio

我不得不为 jsx 文件关闭 javascript 智能感知，正如 Adam 在他的回答中的解决方案 1 中所示：

In Visual Studio, go to Tools > Options > Text Editor > JavaScript > IntelliSense, then uncheck the Show syntax errors box and OK out.

关闭 javascript intellisense 后，与 vs 一起打包的 react-server 和我在这里替换它的 babel 都只是 return 它们遇到的第一个错误，所以你不应该期望查看整个文件中所有错误的突出显示，但如果您保持代码无错误，它们会在您键入时显示。

我想现在剩下要做的就是正确地完成 elementMappings - 也许是解决方案 4？ :-)

Answer 3

编辑： Visuals studio 15 已重命名为 Visual Studio 2017：您可以在此处获取 RC：https://www.visualstudio.com/vs/visual-studio-2017-rc/

未来的解决方案：

Visual Studio“15”预览版 2 开箱即用地支持 JSX 和 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

在尝试对此进行研究时，我发现了一种在所有版本的 Visual Studio 中处理 jsx 文件的简单方法。它并不完美，但对我有用。

下载最新的 Visual Studio 代码 [https://code.visualstudio.com/updates ]，然后在您拥有的 Visual Studio 和 select 'Open With...' 的任何版本中右键单击 jsx 文件。 Select 'Add' 并浏览到您最近下载的 Visual Studio 代码并将其设为默认值。

希望对担心必须升级的人有所帮助。

Answer 5

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

100% 来自 Adam Weber 的解决方案 1：（将 ReSharper 中的 JavaScript 语言级别 设置为 ECMAScript 2016，并选中 Enable JSX ... 在相同的 window + 禁用 显示语法错误 在 VS JavaScript IntelliSense 选项）

Adam Weber 的解决方案 2：，但稍作修改；您应该替换的目标文件：

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

用这个：var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

确实在这里：C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\vs-task-server\react-commands.js

重启VS，大功告成。

Answer 6

在安装了 VS2015 Update-3 和 NTVS 1.2 后，只需将 TypeScript Editor 设置为文件扩展名 jsx 的默认编辑器就可以了对我来说。

1) 打开工具>选项>文本编辑器>文件扩展名。

2) 在Extension中输入jsx，select TypeScript Editor作为Editor，然后点击Apply。

Visual Studio 2015 JSX/ES2015 语法高亮

Visual Studio 2015 JSX/ES2015 syntax highlighting

intellisense

ecmascript-6

react-jsx

visual-studio-2015