如何在 VSCode 的.js 文件中注释 JSX 代码？

小开

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

Example :

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

and then Component2 would be commented out

小开

this works, but only single line */}

小开

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.

小开

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

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

小开

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

{/* Your Code */}

Thank you.

小开

This also works

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

小开

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.

小开

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
}

小开

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

小开

Search Babel JavaScript in VS Code:

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

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

小开

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

小开

=>To comment a selected single line or multi-lines of code:

For Windows or Linux machine select the code and use:

Ctrl + / to get comment pattern //
Ctrl + Shift + A to get comment pattern {/* */}

For Mac machine select the code and use:

Cmd + / to get comment pattern //
Cmd + Shift + A to get comment pattern {/* */}

=> To uncomment the commented line(s) of code: Just repeat the step, you used for commenting.

小开

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.

小开

I uninstall SUBLIME BABEL JOSH PENG and it work's

Befor: //

After:

{/* */}

with React JavaScript and it's WORK :-)

enter image description here

小开

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 + /

小开

First install Babel extension in VSCode, then select the line and use ctrl + / in windows
and cmd + / in mac to comment

小开

For window follow these steps:

Select lines you bring under comment.
shift+{
shift+alt+a

enjoy :)