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

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

ES2015代码

它工作正常,如果我删除importexport关键字: 无需导入/导出

我刚刚更新到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.jsreact-commands.js文件,有一个名为transformJsxFromPosttransformJsx的函数。 此方法包含以下行: 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 CLIreplacereact-serverreact-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预设,但是你可以使用任何你喜欢的插件

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

  2. 安装下列软件包:

     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 
  3. 将依赖项添加到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'); 
  4. replacetransformJsxFromPost函数中的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 }; } 
  5. 重新启动visual studio,closures并重新打开任何.jsx文件,并享受babel语法突出显示:-)

笔记
开始后给parsing器一个机会,当你第一次加载到.jsx文件时,visual studio将执行以下操作:

  1. %localappdata%\Temp\中用stderr.txt创build一个文件夹,在这里你可以find任何错误的日志和stdout.txt ,它会告诉你服务器运行的是什么{port} ,并logging其他信息。
  2. 启动一个运行在localhost:{port}上的nodeJs服务器,它接受JSX作为/transformJsxFromPost on /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,你就完成了。