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

Question

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

Answer 1

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

Example :

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

and then Component2 would be commented out

Answer 2

This also works

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

Answer 3

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

Answer 4

I uninstall SUBLIME BABEL JOSH PENG and it work's

Befor: //

After:

{/* */}

with React JavaScript and it's WORK :-)

Answer 5

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

{/* Your Code */}

Thank you.

Answer 6

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.