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

问题描述

X-45454545〜200新新新新旗新新新新旗新新旗新新旗新新旗200新新新新旗新新旗新新旗200新新新旗新新旗200新新新旗新新旗200新新旗200新新旗200新新旗200新新旗200新新旗200新新旗200新新旗2001-新新新新旗新新旗2001-新新新新旗新新旗200新新旗200新新旗2001-新新新新旗新新旗200新新旗2001-新新新新旗新新旗200新新旗2001- 200 200 200 200 200 -40 200 200 -40 -40 200 200 -40 200 200 200 -40 200 200 200 -40 200 200 200 -40 200 200 200 -40 200 200 200 -40 200 200： $ b

如果我删除 import 和 export 关键字：

我刚刚更新到Visual Studio 2015企业更新1，但仍然保持不变。

解决方案

更新（2017-02）

Visual Studio（NTVS）的节点工具一直在使用Salsa分析引擎自v1.2起使用NTVS可能是JSX支持最小阻力的路径。

https://github.com/Microsoft/nodejstools

阅读（和更新）投票）这个答案更多的细节： https://stackoverflow.com/a/41996170/9324

---

ORIGINAL ANSWER

我遇到了一样问题并找到两个解决方案 - 一个使用ReSharper和一个修改Visual Studio外部Web工具。

解决方案1 ​​

在ReSharper 10中：

• 在代码编辑> JavaScript>检查下打开选项对话框


• >在 JavaScript语言级别下拉菜单中选择 ECMAScript 6


• 确保在.JS文件中启用JSX语法选项也是如此（假设您使用JSX语法）。


• 还需要在Visual Studio中禁用JavaScript语法错误，如下所示：
  
  
  
  
  • 转到工具>选项>文本编辑器> JavaScript>智能感知
  
  
  • 取消选中显示语法错误
  
  


• 重新加载VS解决方案

重新加载解决方案后，红色的波澜不散了。但是，JSX的语法突出显示不起作用。在 render 函数中声明的任何元素的开头部分没有正确的着色 - 但是我很容易忽略。

我还应该提到，javascript文件需要有 .js 扩展名。如果您给予他们 .jsx 扩展名，那么您的第一个导入语句会引起红色的乱码。错误信息将是 JSX解析器：非法导入声明。 （这可以使用下面的解决方案2修复）

更新：感谢@SntsDev解决方法
有一种方式以避免将 .jsx 文件命名为 .js ：

• 在Visual Studio ，转到选项>文本编辑器>文件扩展名


• 添加 jsx 并将其分配给 Javascript编辑器

解决方案2

好奇心得到我越好，我想探讨是否有一个非ReSharper解决方案。 Visual Studio使用本地运行的名为 react-server 的节点服务器模块即时解析JSX。这个模块可以在这里找到：

  C：\程序文件（x86）\Microsoft Visual Studio 
 14.0 \Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server 
  

Visual Studio 2015 Update 3的更新
感谢 @QuickBrownFox 的评论/更新。
对于更新3， react-server 命令的位置现在在此文件中：

<$ p新评新新新新新旗新新新新旗新新旗新新旗200新新新新新旗新新旗200新新200新200新新新新旗新新旗旗哨旗新1992新新新新旗新1992 200新新新新旗新1992新新200新新旗200新新新新旗200新新新旗200新新新新旗200新新新旗200新新新旗新1992新新旗新新旗新1992新新旗新新旗新1992新新旗新1992新新旗新新旗新1992新新旗新1992新新旗新1992 $ b

进一步检查 server.js 或 react-commands.js 文件从上述文件夹，有一个名为 transformJsxFromPost 或 transformJsx 。此方法包含以下行： var converted = reactTools.transformWithDetails（code，{elementMap：true}）; 。 X- 20045 X- 20045 X-454545 X-454545 X- 20045 X- 20045 X-454545新新新新新新新新旗新新新新旗新新旗200新新200新200新新新新旗200新新200新新旗新新200新新新旗200新新新旗200新新200新新旗新新200新新200新新200新新旗新新200新新200新新200新新200新新200新新200新200新新200新新200新新200新新200新新200新新200新200新新200新新200新新200新200新新200新新200新新200新新200新新作新旗新新200新新200新新200新新200新新200新新新200新新200新新200新新200新新200新新作新旗新新200新新旗新新200新新款200新新作新旗新新200新新旗2001- > https://www.npmjs.com/package/react-tools ），其中有更多选项可用于解析ES6。

因此： / p>

• 替换此行：

  
  
  

  var转换= reactTools.transformWithDetails（code，{elementMap：true}）;




• 包含以下内容：

  
  
  

  var converted = reactTools.transformWithDetails（code，{elementMap：true，es6module：--es6module，和声：--harmony}）;

  
  
  

  请注意添加 - es6module 和 - 和谐标志，指示反应工具将传入的代码视为ES6。




• 在Visual Studio中禁用JavaScript语法错误，如下所示：

  
  
  
  
  
  • 在Visual Studio中，转到工具>选项>文本编辑器> JavaScript> Intelli感觉
  
  
  • 取消选中显示语法错误框，然后单击确定
  
  



• 重要信息：重新启动Visual Studio。 X-45454545×20045 CEEC X- 20045 X-454545新新新新新新新旗新新200新新旗新新200新200新新旗新新200新新旗新新旗200新新新旗新新旗200新新新新旗新新旗2001-新新新新旗新新旗2001-新新新新新旗新新旗2001-新新新新旗新新旗2001-新新新新旗新新旗2001-新新新新旗新新旗新新旗新新旗新旗新新旗新新旗新新旗新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新新旗新旗旗新新新旗新旗新旗新新旗新新旗新新旗新旗新旗新新旗新新旗新新旗新新旗新旗新旗新新旗新新旗新新旗新新旗新新旗新旗新旗新旗新新旗新新旗新新旗新旗新旗新旗新b
  

  ---

  
  
  

  注意：

  
  
  
  
  
  • 我不知道解决方案2中对 server.js 文件中概述的更改是否会影响非ES6代码。所以自行承担风险。
  
  
  • 此外，很可能/可能您的更改可能会被以后更新到Visual Studio。
  
  
  • 替换使用Babel CLI在 react-server 中使用 react-tools 更新：感谢@NickDewitt，似乎他能够做到这一点： https://stackoverflow.com / a / 36321109/9324
  
  
  
  

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

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

  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) 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

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

  ---

  ORIGINAL ANSWER

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

  SOLUTION 1

  In ReSharper 10:

  • 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.
  • reload the VS solution

  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.

  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)

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

  • in Visual Studio, go to Options > Text-editor > File Extension
  • add jsx and assign it to Javascript Editor

  SOLUTION 2

  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.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\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.0\Web\External\vs-task-server\react-commands.js
  

  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.

  Therefore:

  • replace this line:

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

  • with the following:

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

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

  • disable javascript syntax errors in Visual Studio as follows:

    • in Visual Studio, go to Tools > Options > Text Editor > JavaScript > IntelliSense
    • uncheck the Show syntax errors box and OK out

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

  ---

  NOTES:

  • 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屋！