Wie kann man JSX-Code in .js-Dateien in VSCode auskommentieren?

Im Gegensatz zu Webstorm kann ich JSX-Code in .jsDateien im Visual Studio-Code nicht auskommentieren .

Sie können JSX mit {/ ** /} auskommentieren

Beispiel:

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

und dann würde Komponente2 auskommentiert

Versuchen Sie, alle Plugins zu deaktivieren, da sie das Verhalten des Editors ändern können. Wenn Sie beispielsweise das Babel ES6 / ES7- Plugin verwenden, kommentiert der Editor die .jsxSyntax von //anstelle von {/*. Sie sehen das Problem hier .

Suche Babel JavaScriptim VS-Code:

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

Installiere und command + /kommentiere jsx mit{ /* */ }

In Visual Studio codeHit, Cmd + /wenn Sie auf einem Mac oder einem Ort laufen

{/* Your Code */}

Vielen Dank.

Die Tastaturbefehle ...

Ctrl + /- Windows & Linux
Cmd + /- MacOS

... arbeiten jetzt wie erwartet für Einzelzeilen- und Blockcode, indem Sie {/* */}die ausgewählten Zeilen hinzufügen .

Es wurde in den letzten Insider-Builds von Visual Studio Code behoben und wird in die nächste vollständige Version aufgenommen.

{/ * das funktioniert, aber nur einzeilig * /}

Ich hatte das gleiche Problem, bis ich die Dateisprache in Typescript React (Typoskriptreaktion) konvertierte.

Wenn Sie dies als Sprache für alle .js-Dateien konfigurieren möchten, fügen Sie dies Ihrer settings.json hinzu (entweder global oder auf Projektebene in /.vscode/settings.json).

"files.associations": {
    "*.js": "typescriptreact"
  }

Wenn Sie einen JSX-Syntaxblock kommentieren möchten, können Sie dies tun

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

Das funktioniert auch

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

Derzeit kann dies in Visual Studio-Code durch Drücken der Kombination - Umschalt + Alt + A und Kommentieren des von ihm erzeugten "jsx" -Codes - {/ ** /} Kommentare erfolgen.

Wenn wir cmd + /standardmäßig auf vs Code drücken, werden einzeilige Kommentare erstellt, die für JSX nicht angewendet werden können. Installieren Sie einfach die unten stehende vs Code-Erweiterung, es wird in Ordnung sein.

vscode-language-babel

In React "{}" können wir JavaScript-Ausdrücke verwenden, sodass wir die Art und Weise kommentieren können, wie wir es in JavaScript tun.

Beispiel:

{/* multi 
line 
comment 
*/}

{// single line comment
}

Verwenden Sie für Linux für eine einzelne Zeile Ctrl+ /.

Wählen Sie für mehrzeilige Dateien die Snippets in VSCode aus. Drücken Sie einfach die Ctrl+ Shift+ A.

Es klappt. Viel Spaß beim Codieren

Ich habe einige Stunden mit diesem Problem verbracht, und die einfachste Lösung, die ich gefunden habe, ist die folgende: Ja, das Problem tritt bei der Installation der Babel ES6 / ES7-Erweiterung auf, wie viele bemerkt haben. Wenn Sie sie deinstallieren oder deaktivieren, ruft VScode das normale Verhalten ab: Strg + / => Zeilenkommentar für Zeile oder Block //umschalten, die mit für JS-, JSX-, ... -Dateien ausgewählt wurden; Umschalt + Alt + A => Blockkommentar für Zeile oder Block umschalten, die zwischen <!-- --> in HTML-Dateien, zwischen /* */in JS-Ausdrücken und zwischen ausgewählt sind{/* */}in JSX-Dateien für Markup-Tags in Render / Return ... Wenn Sie also die Babel ES6 / ES7-Erweiterung aktiv lassen möchten und dennoch ein solches Verhalten haben möchten, können Sie Ihre eigene Tastenkombination für die Tastenkombination in der Datei keybindings.json (Datei) parametrieren / Einstellungen / Tastaturkürzel (oder Strg + K + S) und klicken Sie dann auf das kleine Dateisymbol oben rechts, um Tastaturkürzel öffnen auszuwählen, mit denen keybindings.json geöffnet wird. Verwenden Sie dazu den integrierten VScode-Befehl "editor.action.insertSnippet". wie folgt:

[
    {
    "key": "shift+alt+a",
    "command": "editor.action.insertSnippet",
    "args": {
        "snippet": "{/*\n ${TM_SELECTED_TEXT} \n*/}$0"
    },
    "when": "editorLangId == 'javascript' && editorTextFocus && !editorReadonly"
    }
]

Platzieren /nSie die gewünschte Stelle im Ausdruck für das Unterbrechen von Linien und die $0endgültige Platzierung des Cursors. Speichern Sie dann, und es funktioniert direkt :) Nur in JS- und JSX-Dateien Wenn Sie eine andere Sprache angeben möchten, ersetzen Sie 'javascript'den "when"Ausdruck einfach durch die gewünschte Sprache aus dieser Liste der VScode-Sprachkennungen: https://code.visualstudio.com/docs / language / identifiers # _known-language-identifiers Und natürlich, wenn Sie ein anderes Snippet-Verhalten wünschen: Ersetzen {/*Sie einfach das, was Sie im "args"Ausdruck wollen.

=> So kommentieren Sie eine ausgewählte einzelne oder mehrere Codezeilen:

Wählen Sie für Windows- oder Linux- Computer den Code aus und verwenden Sie:

1. Ctrl + / um ein Kommentarmuster zu erhalten //
2. Ctrl + Shift + A um ein Kommentarmuster zu erhalten {/ * * /}

Wählen Sie für Mac- Computer den Code aus und verwenden Sie:

1. Cmd + / um ein Kommentarmuster zu erhalten //
2. Cmd + Shift + A um ein Kommentarmuster zu erhalten {/ * * /}

=> Um Kommentar- der kommentierten Zeile (n) Code: Einfach den Schritt wiederholen, verwendet man für die Kommentare.

Ich deinstalliere SUBLIME BABEL JOSH PENG und es funktioniert

Vorher: //

Nach:

{/ * * /}

mit React JavaScript und es funktioniert :-)