I uninstall SUBLIME BABEL JOSH PENG and it work's

Befor: //


{/* */}

with React JavaScript and it's WORK :-)

enter image description here


Apparently vs code doesn't make comments automatically using ctrl + / or cmd + / on jsx so we have to write {/* text goes here */} manually

EDIT: Uninstall Babel extension from vs code and the jsx comments will start on ctrl + / or cmd + /


For window follow these steps:

  1. Select lines you bring under comment.
  2. shift+{
  3. shift+alt+a

enjoy :)


=>To comment a selected single line or multi-lines of code:

For Windows or Linux machine select the code and use:

  1. Ctrl + / to get comment pattern //
  2. Ctrl + Shift + A to get comment pattern {/* */}

For Mac machine select the code and use:

  1. Cmd + / to get comment pattern //
  2. Cmd + Shift + A to get comment pattern {/* */}

=> To uncomment the commented line(s) of code: Just repeat the step, you used for commenting.


If we press cmd + / by default vs code will do single line comments which can't be applied for JSX. Just install the below vs code extension it will be fine.



In React "{}" allows us to use JavaScript Expressions, so we can comment the way we do in JavaScript.


{/* multi 

{// single line comment


For Linux, For a single line, Use Ctrl + /.

And for multiline, Select the snippets in VSCode Just Hit the Ctrl + Shift + A.

It works. Happy Coding


I spent few hours on this problem, and the easiest solution I found is the following: Yes the problem is coming with the installation of Babel ES6/ES7 extension as many noticed, and when you uninstall or deactivate it, VScode retrieves it's normal behavior: Ctrl + / => Toggle Line Comment for line or block selected with // for JS, JSX, ... files; Shift + Alt + A => Toggle Block Comment for line or block selected between <!-- --> in HTML files, between /* */ in JS expressions and between {/* */} in JSX files for markup tags in render/return... So if you want to keep Babel ES6/ES7 extension active and still have such a behavior: You can parameter your own shortcut key-binding combination in the file keybindings.json ( File/Preferences/Keyboard Shortcuts (or Ctrl+K+S) and then click the little file icon on top right for selecting Open Keyboard Shortcuts wich opens keybindings.json) where you use the VScode build-in command "editor.action.insertSnippet" as following:

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

Place the /n where you want in the expression for breaking lines, and the $0 for final placement(s) of cursor. Then save, and it's working straight :) only in JS and JSX files If you want to specify another language just replace 'javascript' in the "when" expression by the one you want from this VScode Language Identifiers list : And of course if you want another snippet behavior : just replace the {/* by what you want in the "args" expression.


First install Babel extension in VSCode, then select the line and use ctrl + / in windows
and cmd + / in mac to comment


If You want to comment JSX syntax block, you can do like this

  /* <section>
     <header><h3>Contact Form</h3></header>
       <Form />
   </section> */


This also works

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


Currently in Visual studio code it could be done by pressing combination - Shift+Alt+A and comment "jsx" code it produces - {/**/} comments.


{/* this works, but only single line */}


I had the same issue until I converted the file language to Typescript React (typescriptreact).

If you want to configure this as the language for all .js files, add this to your settings.json (either globally, or at a project-level in /.vscode/settings.json).

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


The keyboard commands...

Ctrl + / - Windows & Linux
Cmd + / - MacOS work as expected for single line and block code by adding {/* */} around the selected lines.

It has been fixed in recent Insiders builds of Visual Studio Code and will make it into the next full release.


In Visual Studio code Hit Cmd + / if you are running on mac or place

{/* Your Code */}

Thank you.


Try to disable all plugins, because they can change editor's behaviour. For example if use Babel ES6/ES7 plugin, editor comments .jsx syntax by // instead of {/*. You see see the issue here.


Search Babel JavaScript in VS Code:

enter image description here

Install and command + / will comment jsx with { /* */ }


You can comment out JSX by {/**/}

Example :

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

and then Component2 would be commented out

Related Query

More Query from same tag