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

80

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

YH Eng
quelle
1
Suchen Sie eine Verknüpfung oder wie geht das?
erichardson30
@ erichardson30 Ich würde gerne wissen, wie es geht! Die Verknüpfung kommentiert den Code mit "//", aber das wird natürlich nicht funktionieren. Ich möchte, dass es stattdessen "/ * * /" macht.
YH Eng
Dieser ist verwandt: stackoverflow.com/q/49121821/823321
sɐunıɔ ןɐ qɐp

Antworten:

94

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

Beispiel:

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

und dann würde Komponente2 auskommentiert

erichardson30
quelle
8
Ja, aber gibt es eine Möglichkeit, dies über die Verknüpfung Cmd + / Verknüpfung zu tun?
YH Eng
Ich habe mich umgesehen und nichts gesehen ... Ich werde Sie wissen lassen, wenn ich auf etwas für eine Abkürzung
stoße
1
github.com/Microsoft/vscode/issues/6461 Dies ist, was ich in Bezug auf das Problem gefunden habe
YH Eng
Ja ... es scheint ein fortwährendes Problem zu sein?
erichardson30
23

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 .

Andrej Gajdos
quelle
Ich hatte anscheinend dieses Problem, bei dem der VS-Code-Kommentar in JSX {/* */}mehrere Wochen lang angewendet wurde , aber dann nicht mehr funktionierte. Ich habe Babel ES6 / ES7 gestern installiert, also habe ich nur versucht, es zu deinstallieren, und es ist nicht wieder normal. Irgendeine Hilfe?
Jonathan Tuzman
11

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

{/* Your Code */}

Vielen Dank.

Tunvir Rahman Tusher
quelle
Funktioniert gut +1.
Satheesh
1
Funktioniert nicht, was fehlt uns? Ich habe auch alle Plugins deaktiviert.
Jordanien
9

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.

GollyJer
quelle
Die gleiche Tastenkombination funktioniert auch in Atom (wahrscheinlich nicht überraschend, da Visual Studio Code und Atom beide auf Elektronen basieren).
Greg K
In VS CODE funktioniert es nicht. Verwenden Sie ein Plugin, das Ihnen dabei hilft?
Jordanien
Funktioniert für mich ohne Plugins in der neuesten allgemeinen Version von VS Code.
GollyJer
4

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

Brandon Brigance
quelle
4
Ihre Antwort unterscheidet sich nicht von der bereits gut markierten Antwort.
HDJEMAI
2
Mehrzeilige Kommentare mit dieser Syntax funktionieren für mich einwandfrei ( {/*nur in der ersten und */}nur in der letzten Zeile).
Jon Schneider
1
Unterstützt definitiv mehrzeiligen Kommentar
Charles Watson
4

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"
  }
5tormTrooper
quelle
3

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

{
  /* <section>
     <header><h3>Contact Form</h3></header>
     <figure>
       <Form />
     </figure>
   </section> */
}
Kyaw Kyaw Soe
quelle
2

Das funktioniert auch

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

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.

Sodinikas
quelle
2

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

Manzoor Samad
quelle
2

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
}
Yash P Shah
quelle
1

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

Braj Bhushan Singh
quelle
1

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.

CyberChris
quelle
0

=> 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.

Ipsita Rout
quelle
0

Ich deinstalliere SUBLIME BABEL JOSH PENG und es funktioniert

Vorher: //

Nach:

{/ * * /}

mit React JavaScript und es funktioniert :-)

Geben Sie hier die Bildbeschreibung ein

Gelo K.
quelle