如果注释已存在，vscode 有什么方法可以正确注释掉返回值中的 React 代码吗？

Question

也许存在我不知道的解决方案。这是一些示例代码：

当我突出显示并尝试注释掉第一个和第二个 div 时，会发生以下情况：

这在实际项目中会让人恼火，因为我必须手动插入注释以单独注释掉内容，而不是仅仅突出显示我想要注释的块。同样，完成后我必须手动取消所有内容的注释。 vscode 中有任何插件或解决方案/解决方法吗？

Answer 1

不幸的是，这不仅限于 JSX 中的注释，所有语言中的任何块注释都会发生这种情况：

someExpression();
/* Some pre-existing block comment */
anotherExpression();

如果您围绕这 3 行切换新的块注释，您最终会得到：

/* someExpression();
/* Some pre-existing block comment */
anotherExpression(); */

...这与 JSX 的示例一样不正确。

但是对于大多数语言，我们可以通过使用行注释来解决此限制，无论是针对预先存在的注释还是针对新注释：

someExpression();
// Some pre-existing line comment
anotherExpression();

// When toggling block comment on these 3 lines, they correctly become:
/* someExpression();
// Some pre-existing line comment
anotherExpression(); */

// When toggling line comments instead, they correctly become:
// someExpression();
// // Some pre-existing line comment
// anotherExpression();

不幸的是，此解决方法不适用于 JSX，因为 JSX 语法本质上不支持“行”注释，在这种情况下，VSCode 会将行注释切换为块注释，因此其行为与您的示例中相同。参见例如微软/vscode#133843

---

就我个人而言，如果可能的话，我会通过添加额外的换行符来强制在 JSX 中添加行注释：

<div>
  <div>first div</div>
  {
    // Line comment
  }
  <div>second div</div>
</div>

当您在 2 个 div 周围切换块注释时，它会正确变为：

<div>
 {/*  <div>first div</div>
  {
    // Line comment
  }
  <div>second div</div> */}
</div>

但是在某些情况下，您可能不容易使用行注释，通常是当您将大部分代码切换为注释时，并且某些内部部分可能已经用块注释掉了......

---

有一些 VSCode 扩展可以强制为每一行添加块注释，而不是为整个选择添加块注释，例如Gruntfuggly.bettercomment.

不幸的是，它实际上切换每一行的块注释，因此如果存在预先存在的块注释，它将删除它......

<div>
  <div>first div</div>
  {/* Block comment */}
  <div>second div</div>
</div>

{
  // Toggling line comments with Better Comments extension on the 2 divs gives...
}
<div>
  {/* <div>first div</div> */}
  Block comment
  {/* <div>second div</div> */}
</div>