Visual Studio 2015 JSX / ES2015语法高亮显示
如何在Visual Studio 2015中使用ES2015代码获得正确的语法突出显示？
它工作正常，如果我删除import和export关键字： 
我刚刚更新到Visual Studio 2015年企业更新1，但仍然保持不变。
更新（2017-02）
用于Visual Studio的节点工具（NTVS）自v1.2以来一直使用Salsa分析引擎，并且使用NTVS可能是JSX支持阻力最小的path。
https://github.com/Microsoft/nodejstools
阅读（和upvote）这个答案的更多细节： https : //stackoverflow.com/a/41996170/9324
原来的答案
我遇到了同样的问题，并find了两个解决scheme – 一个使用ReSharper和一个修改Visual Studio外部networking工具。
解决scheme1
在ReSharper 10：
- 打开选项对话框
- 在“代码编辑”>“JavaScript”>“检查”下 ，在JavaScript语言级别下拉列表中selectECMAScript 6
- 确保select.JS文件中的启用JSX语法选项（假设您使用JSX语法）。
- 您还需要在Visual Studio中禁用javascript语法错误，如下所示：
- 转到工具>选项>文本编辑器> JavaScript>智能感知
- 取消选中显示语法错误框并确定。
- 重新加载VS解决scheme
重新加载解决scheme之后，红色的矮胖子已经离我而去了。 但是，JSX的语法突出显示不起作用。 我在render函数中声明的任何元素的开始部分都没有正确的颜色 – 但这很容易让我忽略。
我还应该提到的JavaScript文件需要有.js扩展名。 如果你给他们.jsx扩展名，你会在你的第一个导入语句中得到红色的缩写。 错误信息将会是JSX Parser: illegal import declaration 。 （这可以使用下面的解决scheme＃2来修复）
更新：感谢@SntsDev这个解决方法有一种避免命名.jsx文件作为.js的方法 ：
- 在Visual Studio中，转到选项>文本编辑器>文件扩展名
- 添加jsx并将其分配给Javascript编辑器
解决scheme2
好奇心越来越好，我想探索是否有一个非ReSharper解决scheme。 Visual Studio使用本地运行的名为react-server节点服务器模块来dynamic分析JSX。 这个模块可以在这里find：
C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server
更新Visual Studio 2015更新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 ），它有更多选项可用于parsingES6。
因此：
-
replace这一行：
var transformed = reactTools.transformWithDetails(code, { elementMap: true }); -
具体如下：
var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });请注意，添加了
--es6module和--es6module标志，它们会指示react-tools将传入的代码视为ES6。 -
在Visual Studio中禁用JavaScript语法错误，如下所示：
- 在Visual Studio中，转到工具>选项>文本编辑器> JavaScript>智能感知
- 取消选中显示语法错误框并确定
-
重要说明：重新启动Visual Studio。 ES6代码的
.jsx文件不应该在ES6代码上有红色的.jsx。
笔记：
- 我不知道解决scheme2中给
server.js文件列出的更改是否会影响非ES6代码。 所以实施风险自负。 - 另外，很可能/可能您的更改可能会被Visual Studio的更新更新覆盖。
- 用Babel CLIreplace
react-server的react-tools会很有意思。 更新：感谢@NickDewitt，似乎他能够使这个工作： https : //stackoverflow.com/a/36321109/9324
在安装VS2015 Update-3和NTVS 1.2时，只需将TypeScript Editor设置为文件扩展名为jsx的默认编辑器即可 。
1）打开工具>选项>文本编辑器>文件扩展名 。
2）在Extension中键入jsx ，selectTypeScript Editor作为编辑器，然后单击Apply。
编辑 ：视觉工作室15被重新命名为Visual Studio 2017：您可以在这里得到RC： https ： //www.visualstudio.com/vs/visual-studio-2017-rc/
未来解决scheme
Visual Studio“15”Preview 2支持JSX en开箱即用。 您可以启用相同的（萨尔萨）JavaScript服务库，如VS代码。
这里的发行说明： 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
解决scheme'3'：
感谢Adam在他的回答中提供的见解，我已经和babel一起工作，这是插件/预设。 如果你正在尝试这一点，那么首先应该阅读他的答案。
在进一步操作之前，您需要安装nodeJs和npm ，并且在修改它们之前备份任何文件。
我正在使用react ， es2015插件和stage1预设，但是你可以使用任何你喜欢的插件
-
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'); -
replace
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，closures并重新打开任何.jsx文件，并享受babel语法突出显示:-)
笔记
开始后给parsing器一个机会，当你第一次加载到.jsx文件时，visual studio将执行以下操作：
- 在
%localappdata%\Temp\中用stderr.txt创build一个文件夹，在这里你可以find任何错误的日志和stdout.txt，它会告诉你服务器运行的是什么{port}，并logging其他信息。 - 启动一个运行在
localhost:{port}上的nodeJs服务器，它接受JSX作为/transformJsxFromPoston/transformJsxFromPost上的POST，并将作为json对象遇到的第一个错误的行号和列号返回给visual studio
我不得不closuresjsx文件的javascript intellisense，正如Adam在解答1中的回答：
在Visual Studio中，转至工具>选项>文本编辑器> JavaScript>智能感知，然后取消选中显示语法错误框并确定。
closuresjavascript intellisense，这两个反应服务器与VS和巴贝尔打包，因为我在这里取代它们只返回他们遇到的第一个错误，所以你不应该期望看到在整个文件中的所有错误突出显示，但他们显示当你input，如果你保持你的代码错误免费。
我想现在所有剩下要做的就是正确地得到elementMappings – 解决scheme4也许？ 🙂
虽然试图研究这个，我意识到一个简单的方法来处理所有版本的Visual Studio中的jsx文件。 这不是完美的，但为我工作。
下载最新的Visual Studio代码[ https://code.visualstudio.com/updates ]，然后右键单击任何版本的Visual Studio中的jsx文件，然后select“打开方式…”。 select“添加”并浏览到您最近下载的Visual Studio代码，并将其设置为默认值。
希望能帮助人们担心升级。
在@TheQuickBrownFox上面的评论中提到了这个问题，但是默认情况下是隐藏的（需要扩展所有才能看到），所以总结我在最新的Visual Studio 2015社区更新3中修复了这个问题：
100％由解决scheme1通过Adam Weber ： https : //stackoverflow.com/a/34110461/1633913 （在ReSharper中将JavaScript语言级别设置为ECMAScript 2016 ，并在同一窗口中选中“ 启用JSX …” ，并禁用显示语法错误 VS JavaScript智能感知选项）
由Adam Weber提供的解决scheme2 ： https : //stackoverflow.com/a/34110461/1633913 ，但略有修改; 您应该replace的目标文件：
这个： 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，你就完成了。
