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

Question

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

如果我删除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中:

• 打开" 选项"对话框
• 在Code Editing> JavaScript> Inspections下,在JavaScript语言级别下拉列表中选择ECMAScript 6
• 确保在.JS文件选项中选择启用JSX语法(假设您使用JSX语法).
• 您还需要在Visual Studio中禁用javascript语法错误,如下所示:
  • 转到工具>选项>文本编辑器> JavaScript> IntelliSense
  • 取消选中Show syntax errors框并单击OK.
• 重新加载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的评论/更新.对于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中,转到" 工具">"选项">"文本编辑器">"JavaScript">"IntelliSense"
  • 取消选中Show syntax errors框并单击OK

• 重要说明:重新启动Visual Studio.你.jsx用ES6代码文件应该不会再有你的ES6代码红色波浪线.

笔记:

• 我不知道server.js文件解决方案2中列出的更改是否会影响非ES6代码.因此请自行承担风险.
• 此外,您很可能/可能会在以后更新Visual Studio时覆盖您的更改.
• 这将是酷/好玩替换使用的react-tools范围内react-server与巴贝尔CLI.更新:感谢@NickDewitt,他似乎能够做到这一点:https : //stackoverflow.com/a/36321109/9324

Answer 2

在VS2015 Update-3和NTVS 1.2中安装,只需将TypeScript Editor设置为文件扩展名jsx的默认编辑器就可以了.

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

2)在Extension中键入jsx,选择TypeScript Editor作为Editor,然后单击Apply.

Answer 3

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

未来解决方案

Visual Studio"15"预览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

解决方案'3':

感谢亚当在他的回答中的见解,我得到了与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. 将依赖项添加到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');
   

4. 替换函数中赋值的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
        };
   }
   

5. 重启visual studio,关闭并重新打开任何.jsx文件,享受babel语法高亮:-)

注释
在启动后为解析器提供启动的机会,当您第一次加载到.jsx文件时,Visual Studio将执行以下操作:

1. 创建一个文件夹%localappdata%\Temp\与stderr.txt在那里你可以找到一个日志的任何错误和stdout.txt它会告诉你什么样{port}的服务器上运行,并记录等信息.
2. 启动一个nodeJs服务器,在localhost:{port}其上运行,接受JSX作为POST,/transformJsxFromPost并将它遇到的第一个错误的行号和列号作为json对象返回到visual studio

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

在Visual Studio中,转到"工具">"选项">"文本编辑器">"JavaScript">"IntelliSense",然后取消选中"显示语法错误"框并单击"确定".

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

我想现在剩下要做的就是elementMappings妥善解决 - 解决方案4也许吧？:-)