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.

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

Example :

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

and then Component2 would be commented out

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

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' />
}

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"
  }

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

Comment selected lines

Edit > Toggle Line Comment or Ctrl + / or add // before line

OUTPUT: //Some Lines of Code here

Comment selected Block:

Edit > Toggle Block Comment or Shift + Alt + A

OUTPUT: /*Some Code here*/

Do the same action for Uncomment

来源：https://stackoverflow.com/questions/38483225/how-to-comment-jsx-code-out-in-js-files-in-vscode

标签

reactjs

react-native

visual-studio-code

jsx