Visual Studio 2015 JSX/ES2015 语法高亮
Posted
技术标签:
【中文标题】Visual Studio 2015 JSX/ES2015 语法高亮【英文标题】：Visual Studio 2015 JSX/ES2015 syntax highlighting 【发布时间】：2016-03-09 22:49:34 【问题描述】：如何使用 ES2015 代码在 Visual Studio 2015 for JSX 中获得正确的语法高亮显示？
如果我删除 import 和 export 关键字，它会正常工作：
我刚刚更新到 Visual Studio 2015 Enterprise Update 1，但它仍然保持不变。
【问题讨论】：
我实际上建议切换到 typescript 并使用 TSX 文件。我认为 VS 2015 依赖于 typescript 编译器。根据我的经验，它已被证明更多更可靠。我推荐这篇文章：medium.com/@lucavgobbi/…。如果有人觉得它有用，我可以写一个更彻底的答案（针对 webpack2 更新）。 【参考方案1】：更新（2017 年 2 月）
Node Tools for Visual Studio (NTVS) 自 v1.2 以来一直使用 Salsa 分析引擎，使用 NTVS 可能是 JSX 支持阻力最小的路径。
https://github.com/Microsoft/nodejstools
阅读（并投票）此答案以了解更多详情：https://***.com/a/41996170/9324
原始答案
我遇到了同样的问题并找到了两种解决方案 - 一种使用 ReSharper，另一种是修改 Visual Studio 外部 Web 工具。
解决方案 1
在 ReSharper 10 中：
打开选项对话框 在 Code Editing > JavaScript > Inspections 下的 JavaScript language level 下拉菜单中选择 ECMAScript 6 确保在 .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 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://***.com/a/36321109/9324
【讨论】：
有一种方法可以避免将 .jsx 文件命名为 .js：在 VS 中，选项 > 文本编辑器 > 文件扩展名，添加“jsx”并将其分配给“Javascript 编辑器”。这是针对解决方案 1。谢谢！ 解决方案 2 从 VS2015 更新 1 开始仍然有效吗？我已应用该修复程序并重新启动，但 VS 在所有 .jsx 文件的导入和导出上仍显示红色曲线。 @AdamWeber 如果您有兴趣，我设法将其换成 babel，请在下面查看我的答案 @DylanParry，您需要执行解决方案 1 中的可选步骤：转到工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense，然后取消选中显示语法错误 从更新 2 或 3 开始，不确定是哪个，它现在位于“C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External”下。【参考方案2】：在安装了 VS2015 Update-3 和 NTVS 1.2 时，只需将 TypeScript Editor 设置为文件扩展名 jsx 的默认编辑器就可以了。
1) 打开工具>选项>文本编辑器>文件扩展名。
2) 在 Extension 中输入 jsx，选择 TypeScript Editor 作为 Editor，然后点击 Apply。
【讨论】：
+1 用于使用 NTVS。我最初发布这个问题的答案时尝试使用它，但当时他们对 JSX 的支持并不好。既然 NTVS 使用了 Salsa 引擎，那么使用 NTVS 可能比修改外部工具更容易（也更明智）。 格式很烂。当我自动格式化我的 jsx 文档时，所有缩进都消失了。我最终得到了一个不可读的平面文件 您可以使用工具>选项>文本编辑器>打字稿来处理制表位和格式设置 它没有提供智能感知【参考方案3】：编辑： Visuals Studio 15 重命名为 Visual Studio 2017：您可以在此处获取 RC：https://www.visualstudio.com/vs/visual-studio-2017-rc/
未来的解决方案：
Visual Studio "15" Preview 2 支持 JSX en React 开箱即用。您可以启用相同的 (Salsa) Javascript 服务库，如 VS Code。
这里是发行说明： 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
【讨论】：
visual studio 链接错误 预览版 3 已发布。正确的链接是visualstudio.com/en-us/news/releasenotes/vs15-relnotes【参考方案4】：解决方案'3'：
感谢亚当在他的回答中的见解，我已经使用 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');
替换transformJsxFromPost函数中req.on('end'赋值的trycatch部分：
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 服务器，在 localhost:port 上运行，它接受 JSX 作为 /transformJsxFromPost 上的 POST，并将遇到的第一个错误的行号和列号作为 json 对象返回给 Visual Studio
我不得不关闭 jsx 文件的 javascript intellisense，正如 Adam 在他的回答中的解决方案 1 中所示：
在 Visual Studio 中，转到工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense，然后取消选中显示语法错误框并确定。
关闭 javascript intellisense 后，与 vs 打包的 react-server 和我在这里替换它的 babel 都只返回它们遇到的第一个错误，因此您不应该期望在整个文件中看到突出显示的所有错误，但是如果您保持代码无错误，它们会在您键入时显示。
我想现在剩下要做的就是正确完成elementMappings - 解决方案 4 可能吗？ :-)
【讨论】：
不想为我工作。我收到错误“JSX 解析器：无法与 JSX 解析器通信”。我已经安装了上面列出的四个节点模块，但是当我尝试将它们中的任何一个导入server.js 脚本时就会出现错误。
意思是说我用的是VS2015 Update 2。
啊，好吧，我确实遇到过类似的情况，我认为这是启动和重启 vs 和节点服务器的副作用，它似乎在你修改和文本后立即更新
@MichalCiechan 语法错误表明它正在工作，它给你一个行号和列号吗？
@MichalCiechan 您是否关闭了底部注释中的 javascript 错误？我刚刚在我的工作笔记本电脑上设置了这个，它仍然在那里为我显示syntax error，直到我关闭 js 语法检查【参考方案5】：
在尝试对此进行研究时，我意识到了一种在所有版本的 Visual Studio 中使用 jsx 文件的简单方法。它并不完美，但对我有用。
下载最新的 Visual Studio 代码 [https://code.visualstudio.com/updates]，然后右键单击任何版本的 Visual Studio 中的 jsx 文件，然后选择“打开方式...”。选择“添加”并浏览到您最近下载的 Visual Studio Code 并将其设为默认值。
希望能帮助那些担心必须升级的人。
【讨论】：
【参考方案6】：@TheQuickBrownFox 在上面的 cmets 中提到了它，但默认情况下是隐藏的（需要全部展开才能看到它），所以总结一下我在最新的 Visual Studio 2015 社区更新 3 中为解决该问题所做的工作：
100% 来自 Adam Weber 的 解决方案 1：https://***.com/a/34110461/1633913 （将 ReSharper 中的 JavaScript Language Level 设置为 ECMAScript 2016，并在同一窗口中选中 Enable JSX ... + 禁用 Show syntax VS JavaScript IntelliSense 选项中的错误）
Adam Weber 的解决方案 2：https://***.com/a/34110461/1633913，但稍作修改；您应该替换的目标文件：
这个：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就完成了。
【讨论】：
这个答案中的路径对我来说是正确的，但我无法让它工作。 Visual Studio 仍然是Syntax Error。我尝试了两个：var transformed = reactTools.transformWithDetails(code, elementMap: true, es6module: "--es6module", harmony: "--harmony" ); 和 var transformed = reactTools.transformWithDetails(code, elementMap: true, es6module: true, harmony: true );，但是 *.jsx 文件中的 html 不再显示为语法错误，它只是导入部分......
经典之一，但可能有帮助；保存没有错误（因为它在没有管理员权限的程序文件编辑器中无法执行此操作）？保存后是否重新启动了VS和Windows？ VS使用节点服务器进行操作，所以重启Windows肯定意味着重启所有的东西。
我没有重新启动 Windows，但我当然重新启动了 Visual Studio，正如答案中所述。此外，我确实以管理员身份启动了我的文本编辑程序，以便能够对文件进行更改...
正如@AdamWeber 提到的； VS 使用 本地运行的节点服务器应用程序 来解决问题。仅重新启动此应用程序（或整个节点服务器）可能会有所帮助；不过，我还没有检查过这个，因为由于新的更新，我还是要重新启动我的 Windows 10。我知道这是硬核，但重新启动操作系统可能是解决方案？以上是关于Visual Studio 2015 JSX/ES2015 语法高亮的主要内容，如果未能解决你的问题，请参考以下文章