Visual Studio 2015 JSX/ES2015 语法高亮 [英] Visual Studio 2015 JSX/ES2015 syntax highlighting

问题描述

如何使用 ES2015 代码在 Visual Studio 2015 for JSX 中获得正确的语法高亮显示?

How can I get a proper syntax highlighting in Visual Studio 2015 for JSX with ES2015 code?

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

It works fine if I remove the import and export keywords:

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

I just updated to Visual Studio 2015 Enterprise Update 1 but it still remains the same.

推荐答案

UPDATE (2017-02)

Node Tools for Visual Studio (NTVS) 自 v1.2 以来一直使用 Salsa 分析引擎，使用 NTVS 可能是 JSX 支持阻力最小的途径.

Node Tools for Visual Studio (NTVS) has been using the Salsa analysis engine since v1.2 and using NTVS is likely the path of least resistance for JSX support.

https://github.com/Microsoft/nodejstools

阅读(并投票)此答案以了解更多详情:https://stackoverflow.com/a/41996170/9324

Read (and upvote) this answer for more details: https://stackoverflow.com/a/41996170/9324

原答案

我遇到了同样的问题并找到了两种解决方案 - 一种使用 ReSharper，另一种修改 Visual Studio 外部 Web 工具.

I ran into the same issue and found two solutions - one using ReSharper and one modifying Visual Studio external web tools.

解决方案 1

在 ReSharper 10 中:

In ReSharper 10:

• 打开选项对话框
• 在代码编辑> JavaScript >检查下，在JavaScript语言级别下拉菜单中选择ECMAScript 6
• 确保在 .JS 文件中启用 JSX 语法 选项也被选中(假设您使用 JSX 语法).
• 您还需要在 Visual Studio 中禁用 javascript 语法错误，如下所示:
  • 转到工具>选项>文本编辑器>JavaScript>智能感知
  • 取消选中显示语法错误框并确定.
  • open the Options dialog
  • under Code Editing > JavaScript > Inspections choose ECMAScript 6 in the JavaScript language level drop down
  • ensure the Enable JSX syntax in .JS files option is selected as well (assuming you use JSX syntax).
  • you also need to disable javascript syntax errors in Visual Studio as follows:
    • go to Tools > Options > Text Editor > JavaScript > IntelliSense
    • uncheck the Show syntax errors box and OK out.

    重新加载解决方案后，红色波浪线对我来说消失了.但是，JSX 的语法突出显示不起作用.我在 render 函数中声明的任何元素的开头部分都没有正确的着色 - 但我很容易忽略这一点.

    After reloading the solution, the red squigglies were gone for me. However, the syntax highlighting for JSX doesn't work. The opening segment of any elements I declare in the render function don't have the proper coloring - but that's easy for me to ignore.

    我还应该提到 javascript 文件需要具有 .js 扩展名.如果你给他们 .jsx 扩展名，你会在你的第一个 import 语句中得到红色波浪线.错误消息将是 JSX Parser:非法导入声明.(这可以使用下面的解决方案#2 解决)

    I should also mention that the javascript files need to have .js extension. If you give them .jsx extension, you'll get red squigglies on your first import statement. The error message will be JSX Parser: illegal import declaration. (This can be fixed using solution #2 below)

    更新:感谢@SntsDev 提供的解决方法有一种方法可以避免将 .jsx 文件命名为 .js:

    UPDATE: thanks to @SntsDev for this workaround There is a way to avoid naming the .jsx files as .js:

    • 在 Visual Studio 中，转到选项 > 文本编辑器 > 文件扩展名
    • 添加 jsx 并将其分配给 Javascript 编辑器
    • in Visual Studio, go to Options > Text-editor > File Extension
    • add jsx and assign it to Javascript Editor

    解决方案 2

    好奇心战胜了我，我想探索是否有非 ReSharper 解决方案.Visual Studio 使用名为 react-server 的本地运行节点服务器模块来动态解析 JSX.这个模块可以在这里找到:

    Curiosity got the better of me and I wanted to explore whether or not there was a non-ReSharper solution. Visual Studio uses a locally running node server module named react-server to parse JSX on the fly. This module can be found here:

    C:Program Files (x86)Microsoft Visual Studio
    14.0Common7IDEExtensionsMicrosoftWeb ToolsExternal
    eact-server
    

    Visual Studio 2015 更新 3 的更新感谢 @TheQuickBrownFox 的评论/更新.对于更新 3，react-server 命令的位置现在在这个文件中:

    UPDATE for Visual Studio 2015 Update 3 Thanks to @TheQuickBrownFox for the comment/update. For Update 3, the location of the react-server commands is now in this file:

    C:Program Files (x86)Microsoft Visual Studio 
    14.0WebExternalvs-task-server
    eact-commands.js
    

    进一步检查上述文件夹中的 server.js 或 react-commands.js 文件，有一个名为 transformJsxFromPost 或 transformJsx.此方法包含以下行:vartransformed = reactTools.transformWithDetails(code, { elementMap: true });.这是对 react-tools 模块的引用(https://www.npmjs.com/package/react-tools)，其中有更多选项可用于解析 ES6.

    Further examining the server.js or react-commands.js file from the aforementioned folder(s), there is a function named transformJsxFromPost or transformJsx. This method contains the following line: var transformed = reactTools.transformWithDetails(code, { elementMap: true });. This is a reference to the react-tools module (https://www.npmjs.com/package/react-tools), which has more options available for parsing ES6.

    因此:

    • 替换这一行:

    • replace this line:

    var Transform = reactTools.transformWithDetails(code, { elementMap: true });

    具有以下内容:

    var 转换 = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module",harmony: "--harmony" });

    注意添加了 --es6module 和 --harmony 标志，它们指示 react-tools 将传入的代码视为 ES6.

    Note the addition of the --es6module and --harmony flags, which instruct react-tools to treat the incoming code as ES6.

    在 Visual Studio 中禁用 javascript 语法错误，如下所示:

    disable javascript syntax errors in Visual Studio as follows:

    • 在 Visual Studio 中，转到工具 > 选项 > 文本编辑器 > JavaScript > IntelliSense
    • 取消选中显示语法错误框并确定

    重要提示: 重新启动 Visual Studio.带有 ES6 代码的 .jsx 文件不应再在 ES6 代码上出现红色波浪线.

    IMPORTANT: restart Visual Studio. Your .jsx files with ES6 code should no longer have red squiggles on your ES6 code.

    注意:

    • 我不知道解决方案 2 中概述的对 server.js 文件的更改是否会影响非 ES6 代码.因此，实施风险自负.
    • 此外，您的更改很可能/很可能会被 Visual Studio 的后续更新覆盖.
    • 用 Babel CLI 替换 react-server 中 react-tools 的使用会很酷/很有趣.更新:感谢@NickDewitt，他似乎能够完成这项工作:https://stackoverflow.com/a/36321109/9324
    • I don't know if the change outlined in SOLUTION 2 to the server.js file will impact non-ES6 code. So implement at your own risk.
    • Also, it's quite possible/likely your change could get overwritten with a later update to Visual Studio.
    • It would be cool/fun to replace the use of react-tools within react-server with Babel CLI. UPDATE: Thanks to @NickDewitt, seems he was able to make this work: https://stackoverflow.com/a/36321109/9324

    这篇关于Visual Studio 2015 JSX/ES2015 语法高亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！