vscode 快捷方式中的 (crl + /) 使 jsx 注释不正确

Question

In vscode in react class component (crl + /) will create the correct comment for JSX

{/* comment */}

But in vscode in react functional component (crl + /) will create an incorrect comment for JSX

// comment

How do you fix this in vscode

Answer 1

Based on the asker's comments, this is caused a the Babel extension.

You do not need any extensions to work with react in VS Code. This Babel extension specifically was last updated in 2016 and can break many basic language features such as highlighting and commenting

Answer 2

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 behaviour: 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 behaviour: 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 behaviour: just replace the {/* by what you want in the "args" expression.