在 Sublime Text 3 中注释掉 JSX？

Question

几个月来，我一直对 JSX 中缺少注释（命令 + /）感到沮丧。这可能吗？

Answer 1

虽然我建议在 Sublime Text 3 中使用语法突出显示，但正如您在此处babel-sublime看到的，JSX 注释存在许多问题。然而，引用@zertosh 的话，它是可以实现的：

不幸的是，有多种问题导致此问题无法解决。不存在 JSX 注释这样的东西。你可以使用带有 JS 注释的 JSX 表达式（大括号）——但这只是 babel-sublime 为了方便而伪造的。正如您所注意到的，当您尝试取消评论时，这种虚假行为就会刺痛您。这里有一个歧义。由于大括号不是注释的一部分，Sublime 将它们留在后面。

另一种方法是将 JSX 表达式花括号的范围限制为注释的一部分。但这可能会导致主题出现问题。它看起来像这样：

你可以用这个补丁自己尝试一下：

    diff --git a/JavaScript (Babel).sublime-syntax b/JavaScript (Babel).sublime-syntax
    index ec9403e..dffd90e 100644
    --- a/JavaScript (Babel).sublime-syntax 
    +++ b/JavaScript (Babel).sublime-syntax 
    @@ -1185,6 +1185,13 @@ contexts:
           scope: invalid.illegal.bad-ampersand.jsx

       jsx-evaluated-code:
    +    - match: \{/\*
    +      scope: punctuation.definition.comment.begin.js
    +      push:
    +        - meta_scope: comment.block.js
    +        - match: \*/\}
    +          scope: punctuation.definition.comment.end.js
    +          pop: true
         - match: \{
           scope: punctuation.section.embedded.begin.jsx
           push:

编辑

要实施该补丁，只需在JavaScript (Babel).sublime-syntax文件的第 1109 行之后进行编辑，添加下面的行并在其前面添加加号 (+)：

.....
    scope: invalid.illegal.bad-ampersand.jsx

   jsx-evaluated-code:
+    - match: \{/\*
+      scope: punctuation.definition.comment.begin.js
+      push:
+        - meta_scope: comment.block.js
+        - match: \*/\}
+          scope: punctuation.definition.comment.end.js
+          pop: true
     - match: \{
       scope: punctuation.section.embedded.begin.jsx
       push:
.....