Gibt es eine Möglichkeit, Komponenten oder HTML-Vervollständigungen in Visual Studio Code zu verwenden? Weil es keine gute Idee ist, jeden Buchstaben manuell einzugeben, wenn wir Klassen wie Bootstrap usw. haben. Zum Beispiel Vervollständigung wie in Emmet:ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;

Visual Studio-Code erkennt .jsx-Erweiterungen und fügt standardmäßig Emmet-Unterstützung hinzu (ich verwende VS-Code 1.8.1).

Wenn Sie jedoch die .js-Erweiterung für alle Ihre Reaktionsdateien bevorzugen, können Sie den JavaScript-Reaktionsmodus mit .js-Dateien in der unteren rechten Ecke des VS-Code-Fensters verknüpfen.

Wie geht das Schritt für Schritt (gif)

2019: Klare Antwort auf React

Der einfachste Weg, um die automatische Vervollständigung von JSX / HTML in Ihren React-Projekten zu erreichen, besteht darin, dies Ihren Benutzereinstellungen oder Arbeitsbereichseinstellungen hinzuzufügen ( <project-path>/.vscode/settings.json):

      "emmet.includeLanguages": {
        "javascript": "javascriptreact"
      },
      "emmet.triggerExpansionOnTab": true

Möglicherweise müssen Sie VS Code neu starten, damit die Änderung wirksam wird.

PS Wenn Sie dieses Mapping nicht für ein React.js-Projekt durchführen, sollte die Antwort von KehkashanFazal wahrscheinlich für Sie funktionieren.

Wenn jemand immer noch mit diesem Problem zu kämpfen hat:

Ich habe diese einfache Einstellung entdeckt

"emmet.syntaxProfiles": {
     "javascript": "jsx" 
 },

aktiviert die HTML-Vervollständigung nicht. Aber mit:

"emmet.includeLanguages": {
    "javascript": "html"
}

tut.

Laut emmet docs :

"emmet.includeLanguages": {}

Aktivieren Sie Emmet-Abkürzungen in Sprachen, die standardmäßig nicht unterstützt werden. Fügen Sie hier eine Zuordnung zwischen der Sprache und der von Emmet unterstützten Sprache hinzu.
Z.B:{"vue-html": "html", "javascript": "javascriptreact"}

Wählen Sie einfach den entsprechenden Sprachmodus unten rechts auf dem Bildschirm aus: Stellen Sie JavaScript React ein.

2018

Ich benutze VSCode (ver 1.27.2)

Basiere auf meiner Erfahrung, obwohl ich mit arbeite React. Die erkannte Sprache auf meiner VSCodeist immer noch Vanille JavaScript. Und emmet hat nicht funktioniert.

• Eine Möglichkeit, es wieder zum Laufen zu bringen, besteht darin, die VSCodeerkannte Sprache in zu ändern JavaScript React. Dies gilt nur für einzelne JSDateien.

• Um es einmal vollständig zu ändern, müssen Sie es zuordnen.

Klicken Configure File Association for .js...

Und wählen Sie aus JSX, was ich in meinem Fall bereits getan habe.

• Für die Arbeitsplatzeinstellung und zuletzt, wenn keiner von ihnen für Sie funktioniert. Gehen Sie zu Einstellungen von nur ctrl + , (comma), um es zu öffnen.

Geben Sie ein und suchen Sie nach emmetoder Emmet. Kopieren Sie dann die Einstellung, die Sie überschreiben möchten. In meinem Fall:

{
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
}

Hinweis : Ich habe nicht versucht, jsxnur zu verwenden javascriptreact.

Ich habe den zweiten und dritten Schritt implementiert. Und das kann ich jetzt tun Emmet.

Keine dieser Lösungen hat funktioniert ... aber die Auto Close Tag-Erweiterung funktioniert! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Update 2019

Tags zum automatischen Schließen in .html, .js und .jsx

Funktioniert sofort. Das heißt, nachdem Sie die schließende Klammer zum öffnenden Tag eingegeben haben, wird das schließende Tag automatisch eingefügt.

Emmet mit einfachem HTML in .jsx-Dateien

Funktioniert sofort.

Emmet mit einfachem HTML in .js-Dateien:

Fügen Sie die folgende Einstellung hinzu, die für Vorschläge zur Emmet-Abkürzung erforderlich ist und für die konsistente Funktion der Registerkartenerweiterung erforderlich ist.

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

Emmet mit benutzerdefinierten Tags (z. B. React Components) in .js- und .jsx-Dateien

Fügen Sie die folgende Einstellung hinzu:

  "emmet.triggerExpansionOnTab": true,

Beachten Sie, dass Emmet mit dieser Einstellung alle Wörter als benutzerdefinierte Tags erweitert (nicht nur Komponentennamen reagieren).

Beachten Sie außerdem, dass Sie bei Verwendung von Emmet zum Erweitern von React-Komponenten als benutzerdefinierte Tags den Komponentennamen aus der Vorschlagsliste auswählen und diesen zuerst vervollständigen müssen (oder den gesamten Namen manuell eingeben und das Vorschlagsmenü mit der Escape-Taste schließen müssen). Nachdem das Wort erweitert wurde, müssen Sie erneut auf die Registerkarte klicken, damit Emmet das benutzerdefinierte Tag erweitert.

Es gibt eine aktive Funktionsanforderung , um diesen zusätzlichen Schritt möglicherweise zu entfernen (automatisch erweitern, wenn der Vorschlag ausgewählt wird, sodass er genauso funktioniert wie das Erweitern von Standard-HTML-Tags).

Fehlerbehebung

Stellen Sie sicher, dass Sie über die neueste Version von VSCode verfügen.

Stellen Sie sicher, dass Sie die folgenden Standardeinstellungen nicht geändert haben:

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,

// read the GitHub issue listed above if you're curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don't want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],

Ich habe das Problem einfach durch Ausführen der folgenden Schritte gelöst:

1. Klicken Sie links unten in VSCode auf Javascript
2. Dann sehen Sie oben eine Liste. Klicken Sie auf "Sprachbasierte Einstellungen für 'Javascript' konfigurieren".

3. Fügen Sie der Datei folgende Zeilen hinzu:

   "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
   }
   

Wenn Sie weitere Details wünschen, können Sie diesen Link überprüfen .

Einfache Antwort im Jahr 2020

Wählen Sie zunächst die Dateizuordnung unten rechts in der Mitte des Fensters aus.

Zweitens wählen Configure Dateizuordnung für Js aus dem Menü , das in der oberen Mitte des Fensters nach unten fällt. Ändern Sie es in JavaScript React.

Sie können die automatische Schließerweiterung in Visual Studio-Code verwenden. ps. Wenn Sie die Erweiterung installieren, funktioniert die automatische Vervollständigung erst, wenn Sie den VS-Code neu laden. Öffnen Sie einfach den VS-Code erneut, oder wechseln Sie zur Tag-Erweiterung zum automatischen Schließen und klicken Sie auf Neu laden.

Link der Auto-Close-Tag- Erweiterung

Ich brauchte zwei Schritte, um automatisch schließende Tags in JSX zu erhalten.

1. Befolgen Sie die obigen Anweisungen von Kehkashan Fazal zum Einstellen "emmet.includeLanguages"
2. Laden Sie die Auto Close Tag-Erweiterung von VSCode herunter ( formulahendry.auto-close-tag)

Und jetzt haben Sie schöne JSX-Tags zum automatischen Schließen!

Befolgen Sie nur diese beiden Schritte:

1. Klicken Sie unten im VSCode, wo die Sprache erkannt wird, darauf

1. Schritt

2. Klicken Sie auf "Konfigurieren Sie die sprachbasierten Einstellungen von 'Javascript (Babel)' ..." oder was auch immer

2. Schritt

3. Fügen Sie diesen Code zuerst durch Komma '' ein und speichern Sie ihn.

"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true

3. Schritt

Ich habe alle Antworten geworfen und diese Konfiguration hat bei mir funktioniert. musste Sprache einschließen sowie syntaxProfile hinzufügen. Ohne die Trigger-Erweiterung hat nichts funktioniert, aber jetzt drücke ich nur die Tabulatortaste, um das Ergebnis zu erhalten.

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true

Ich habe an verschiedenen Projekten gearbeitet und habe eine große Einstellungsdatei.

Ich überprüfte die Einstellungen und fand heraus, dass diese Einstellungen das alles ruinierten.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

Also habe ich es kommentiert. Und in React Apps funktioniert alles perfekt. Vielen Dank

Arbeiten Sie nur in JSX-Dateien. Lass es nicht mit JS funktionieren.

"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascriptreact": "javascriptreact"
},

Autocomplete für React Babel hat bis gestern für mich einwandfrei funktioniert.

Keine dieser Antworten hat geholfen, also habe ich meinen Computer neu gestartet. Lief wie am Schnürchen ;)