在Sublime Text 3中如何将JSX注释掉？

Question

最近几个月我一直被JSX中缺少注释的烦恼所困扰。这个问题是否有解决方案？

- Alex Bollbach

---

你使用哪个包来提供JSX语法？ - OdatNurd

在 prefs/browse-packages 中，我看到了 Babel、HTML-CSS-JS Prettify 和 JS-Prettier。 - Alex Bollbach

你也可以阅读这个答案：https://dev59.com/sKDia4cB1Zd3GeqPDGUE#43065934 - Shubham Khatri

Answer 1

这可以通过按下CTRL+Shift+/来完成。

- Suvakanta Das

---

这个不起作用。我还需要做些其他的事情吗？ - Mayuresh Srivastava

Answer 2

虽然我建议在Sublime Text 3中使用babel-sublime进行语法高亮，但正如这里所示，JSX注释存在许多问题。然而，可以实现，引用@zertosh的话：

很不幸，有一些问题使得这个无法修复。JSX没有注释的概念。你可以在JSX表达式（花括号）中使用JS注释，但这只是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:
.....

- Leopold Joy

---

我该如何应用补丁？ - Alex Bollbach

Answer 3

不幸的是，在具有JS / JSX混合的代码中进行注释并不像应该那样直截了当，我设法将其添加到https://github.com/borela/naomi，但这需要许多解决方法、元作用域和插件。

- Alexandre Borela

Answer 4

在一个快捷方式中完成这个任务并不容易，但是可以分成两步来完成

首先选择你想要注释的HTML代码， 然后输入字符{，这样Sublime Text就会将所有选定的区域括起来， 接着按下ctrl + shift + 7进行块注释，单独的注释对此无效，但你仍然可以使用块注释来注释单行代码

应用场景

//1st step
<IndividualStep></IndividualStep>

//2nd step
{<IndividualStep></IndividualStep>}

//3th step
{/*<IndividualStep></IndividualStep>*/}

在这里，它适用于JSX上的任何HTML块

- Luis Hidalgo de Tena