How to comment JSX code out in .js files in VSCode?

Unlike in webstorm, I'm unable to comment JSX code out in .js files in the Visual Studio Code.

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

Example :

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

and then Component2 would be commented out

Search Babel JavaScript in VS Code:

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

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

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.

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

{/* Your Code */}

Thank you.

The keyboard commands...

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

...now 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.

{/* 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"
  }

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

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

This also works

{
  //this.props.user.profileImage
  //? <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.

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.

vscode-language-babel

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

Example:

{/* multi 
line 
comment 
*/}

{// 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 : https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers 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

=>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.

I uninstall SUBLIME BABEL JOSH PENG and it work's

Befor: //

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 :)