如何在VSCode的.js文件中注释掉JSX代码？

79

与webstorm不同，我无法.js在Visual Studio Code中的文件中注释掉JSX代码。

— YH Eng
source

1

您在寻找捷径还是该怎么做？

— erichardson16年

@ erichardson30我想知道如何做！快捷方式注释通过执行“ //”进行编码，但显然不起作用。我希望它改为使用“ / * * /”。

— YH Eng

这一个是相关的：stackoverflow.com/q/49121821/823321

— sɐunıɔןɐqɐp

93

您可以通过{/ ** /}注释掉JSX

范例：

render() {
  return (
    <div>
      <Component1 />
      {/* <Component2 /> */}
    </div>
  )
}

然后将Component2注释掉

— erichardson30
source

8

是的，但是有什么方法可以通过快捷键Cmd + /来实现？

— YH Eng

我一直在搜索，什么也没看到。...当我偶然发现捷径时，我会通知您

— erichardson30'7

1

github.com/Microsoft/vscode/issues/6461这是我设法找到的有关问题的内容

— YH Eng

是的...这似乎是一个持续存在的问题？

— erichardson16年

23

尝试禁用所有插件，因为它们可以更改编辑器的行为。例如，如果使用Babel ES6 / ES7插件，则编辑器用而不是注释.jsx语法。您会在这里看到问题。//{/*

— 安德烈（Andrej Gajdos）
source

我似乎遇到了这个问题，JSX中的VS Code注释应用{/* */}了数周，但随后停止了工作。我昨天确实安装了Babel ES6 / ES7，所以我只是尝试将其卸载，但并没有恢复正常。有什么帮助吗？

— 乔纳森·图兹曼

17

Babel JavaScript在VS代码中搜索：

https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel

安装并用command + /注释jsx{ /* */ }

— 抽动
source

11

如果您是在Mac或Mac上运行，则在Visual Studio codeHitCmd + /

{/* Your Code */}

谢谢。

— Tunvir Rahman Tusher
source

工作正常+1。

— Satheeshwaran

1

不起作用，我们缺少什么？我也禁用了所有插件。

— 约旦

8

键盘命令...

Ctrl + /-Windows和Linux
Cmd + /-MacOS

...现在，通过{/* */}在选定的行周围添加，可以按预期运行单行代码和块代码。

它在Visual Studio Code的最新Insiders版本中已得到修复，并将使其成为下一个完整版本。

— GollyJer
source

相同的键盘快捷键也可以在Atom中使用（可能并不奇怪，因为Visual Studio Code和Atom都是基于电子的）。

— 格雷格K

无法使其在VS CODE中工作。您是否正在使用任何可帮助解决此问题的插件？

— 约旦

在最新版本的VS Code上，无需任何插件即可为我工作。

— GollyJer

4

{/ *这有效，但只有一行* /}

— 布兰登·布莱根斯
source

4

您的答案与已经标记清楚的答案没有什么不同。

— HDJEMAI

2

使用此语法的多行注释对我来说确实不错（{/*第一行中只有注释，*/}最后一行中只有注释）。

— 乔恩·施耐德

1

绝对支持多行注释

— Charles Watson

4

在将文件语言转换为Typescript React（typescriptreact）之前，我遇到了同样的问题。

如果要将其配置为所有.js文件的语言，请将其添加到settings.json（全局或在/.vscode/settings.json中的项目级别）。

"files.associations": {
    "*.js": "typescriptreact"
  }

— 5辆战车
source

3

如果要注释JSX语法块，可以这样

{
  /* <section>
     <header><h3>Contact Form</h3></header>
     <figure>
       <Form />
     </figure>
   </section> */
}

— Kyaw Kyaw Soe
source

2

这也有效

{
  //this.props.user.profileImage
  //? <img
  //    src={ this.props.user.profileImage }!
  //    alt=""
  //  />
  //: <FontAwesome name='smile-o' />
}

— 安东尼奥·布兰道
source

2

当前在Visual Studio代码中，可以通过按组合键Shift + Alt + A并注释它生成的“ jsx”代码-{/ ** /}注释来完成。

— 索迪尼卡斯
source

2

如果我们cmd + /默认按vs代码，则会执行单行注释，而这不适用于JSX。只需安装下面的vs代码扩展，就可以了。

vscode-语言-babel

— 曼佐·萨玛德（Manzoor Samad）
source

2

在React中，“ {}”允许我们使用JavaScript表达式，因此我们可以注释在JavaScript中的操作方式。

例：

{/* multi 
line 
comment 
*/}

{// single line comment
}

— 亚什·P·沙（Yash P Shah）
source

1

对于Linux，对于单行，请使用Ctrl+ /。

对于多行，在VSCode中选择片段，只需点击Ctrl+ Shift+即可A。

有用。快乐编码

— Braj Bhushan Singh
source

1

我花了几个小时解决这个问题，找到的最简单的解决方案如下：是的，Babel ES6 / ES7扩展的安装存在许多问题，当您卸载或停用它时，VScode会恢复它的正常行为： Ctrl + / =>切换//为JS，JSX，...文件选择的行或块的行注释；Shift + Alt + A =>切换 在HTML文件之间/* */，JS表达式之间以及{/* */}在JSX文件中用于渲染/返回中的标记标签...因此，如果您想保持Babel ES6 / ES7扩展处于活动状态并且仍然具有以下行为：您可以在文件keybindings.json中设置自己的快捷键绑定组合（ / Preferences / Keyboard快捷方式（或Ctrl + K + S），然后单击右上角的小文件图标，以选择“ Open Keyboard Shortcuts”（其中会打开keybindings.json），在其中使用VScode内置命令“ editor.action.insertSnippet”如下：

[
    {
    "key": "shift+alt+a",
    "command": "editor.action.insertSnippet",
    "args": {
        "snippet": "{/*\n ${TM_SELECTED_TEXT} \n*/}$0"
    },
    "when": "editorLangId == 'javascript' && editorTextFocus && !editorReadonly"
    }
]

将所需的/n位置放在表达式中以换行，并在$0光标的最终位置处放置。然后保存，它就可以直接使用:)仅在JS和JSX文件中。如果要指定另一种语言，只需'javascript'在"when"此VScode语言标识符列表中用所需的表达式替换：https ://code.visualstudio.com/docs / languages / identifiers＃_known-language-identifiers 当然，如果您想要其他代码段行为：只需{/*将"args"表达式替换为所需的即可。

— 网络克里斯
source

0

=>为了评价所选择的一行或多行的代码：

对于Windows或Linux计算机，请选择代码并使用：

Ctrl + / 获取评论模式//
Ctrl + Shift + A 获取评论模式{/ * * /}

对于Mac机，选择代码并使用：

Cmd + / 获取评论模式//
Cmd + Shift + A 获取评论模式{/ * * /}

=>要取消注释注释的代码行：只需重复用于注释的步骤即可。

— 伊普西塔鲁特
source

0

我卸载了SUBLIME BABEL JOSH PENG，它的工作原理是

之前： //

后：

{/ * * /}

使用React JavaScript，它的工作原理是：-)

在此处输入图片说明

— 盖洛
source