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

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

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

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

1> Adam Weber..：

---

更新(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

---

有一种方法可以避免将.jsx文件命名为.js:在VS,选项>文本编辑器>文件扩展名中,添加"jsx"并将其分配给"Javascript编辑器".这是针对解决方案1.谢谢!

---

从VS2015 Update 1开始,解决方案2仍然有效吗？我已应用该修复程序并重新启动,但VS仍在所有.jsx文件中的导入和导出上显示红色波形.

---

从更新2或3开始,不确定是哪个,它现在位于"C:\ Program Files(x86)\ Microsoft Visual Studio 14.0\Web\External"下.

2> Chebyr..：

---

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

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

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

3> Reint Jan Ho..：

---

编辑: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

---

视觉工作室链接很糟糕

4> 小智..：

---

解决方案'3':

感谢亚当在他的回答中的见解,我得到了与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

将依赖项添加到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');

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

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

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

创建一个文件夹%localappdata%\Temp\与stderr.txt在那里你可以找到一个日志的任何错误和stdout.txt它会告诉你什么样{port}的服务器上运行,并记录等信息.

启动一个nodeJs服务器,在localhost:{port}其上运行,接受JSX作为POST,/transformJsxFromPost并将它遇到的第一个错误的行号和列号作为json对象返回到visual studio

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

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

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

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