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 Visual Studio Code.

回答1:

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

Example :

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

and then Component2 would be commented out

回答2:

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.

回答3:

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

{/* Your Code */}

Thank you.

回答4:

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.

回答5:

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

回答6:

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

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

回答7:

This also works

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

回答8:

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

回答9:

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

回答10:

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
}