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:

Search Babel JavaScript in VS Code:

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

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

回答7:

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

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

回答8:

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

回答9:

This also works

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

回答10:

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

回答11:

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
}

回答12:

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

回答13:

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

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

It works. Happy Coding

回答14:

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