wake-up-neo.com

JSX- oder HTML-Autovervollständigung in Visual Studio-Code

Gibt es eine Möglichkeit, Komponenten oder HTML-Vervollständigung in Visual Studio Code zu verwenden? Da die manuelle Eingabe jedes Buchstabens nicht sinnvoll ist, wenn wir Klassen wie Bootstrap usw. haben. Zum Beispiel Abschluss 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;
reactjsautocompletevisual-studio-codejsxemmet
40
owaishanif786

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

Wenn Sie jedoch vorziehen, die Erweiterung .js für alle Reaktordateien zu verwenden, können Sie die .js-Dateien in der rechten unteren Ecke des VS-Code-Fensters mit dem JavaScript-React-Modus verknüpfen.

Wie mache ich das Schritt für Schritt (gif)

 enter image description here

44
Andrii.Vandakurov

2018: Direkte Antwort auf die Reaktion

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

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

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

P.S. Wenn Sie diese Zuordnung für ein React.js-Projekt nicht durchführen, sollte die Antwort von KehkashanFazal wahrscheinlich für Sie funktionieren.

82
Julian Soro

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

Ich habe das einfach entdeckt 

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

aktiviert keine HTML-Vervollständigung. Aber mit:

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

tut.

Nach 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 unterstützten Sprache hinzu.
ZB: {"vue-html": "html", "javascript": "javascriptreact"} 

29
Kehkashan Fazal

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

14
Donskikh Andrei

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

7
Cole

Ich habe das Problem einfach mit den folgenden Schritten gelöst:

  1. Klicken Sie links unten in VSCode auf Javascript
  2. Oben sehen Sie eine Liste, klicken Sie auf "Sprachbasierte Einstellungen für Javascript konfigurieren".

  3. Fügen Sie der Datei die folgenden Zeilen hinzu:

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

Wenn Sie weitere Informationen wünschen, können Sie den Link this aktivieren.

5
Esin ÖNER

sie können die automatische Schließen-Erweiterung in Visual Studio-Code verwenden ps. Wenn Sie die Erweiterung installieren, funktioniert die Autovervollständigung erst, wenn Sie VS-Code neu laden, einfach VS-Code öffnen oder die Tag-Erweiterung für automatisches Schließen aufrufen und auf Neu laden klicken. 

link des Auto-Close-Tags Erweiterung 

3
zakaria kasmi

2018

Ich verwende VSCode(ver 1.27.2)

Basierend auf meiner Erfahrung, obwohl ich mit React arbeite. Die erkannte Sprache auf meiner VSCode ist immer noch Vanilla JavaScript. Und emmet hat nicht funktioniert. 

  • Eine Möglichkeit, die Funktion wieder herzustellen, besteht darin, die erkannte Sprache von VSCode in JavaScript React zu ändern. Dies gilt nur für eine JS-Datei. 

 vscode options

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

 two

Klicken Sie auf Configure File Association for .js...

 three

Und wähle JSX, was ich in meinem Fall bereits getan habe.

 four

  • Für Workplace Setting und zuletzt, wenn keine davon für Sie funktioniert. Gehen Sie zu Preference of nur zu ctrl + , (comma), um es zu öffnen.

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

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

Note: Ich habe nicht versucht, jsx nur javascriptreact zu verwenden.

 settings

Ich habe den zweiten und dritten Schritt umgesetzt. Und ich kann jetzt Emmet. 

3
RoCk Vangeance

Befolgen Sie nur diese beiden Schritte:

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

1. Schritt

  1. Klicken Sie auf "Sprachbasierte Einstellungen für Javascript (Babel) konfigurieren ..." oder was auch immer

2. Schritt

  1. fügen Sie diesen Code ein, trennen Sie ihn durch Komma ',' und speichern Sie ihn.

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

. Schritt

2
Ameer Hamza

Autocomplete für React Babel hat bis gestern gut für mich gearbeitet.

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

1
Pixelomo

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

"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascriptreact": "javascriptreact"
},
1
Fatih Ertuğral

2019 Update

Automatisch schließende Tags in .html, .js und .jsx

Funktioniert aus dem Kasten heraus. Das heißt, nachdem Sie die schließende Klammer in das öffnende Tag eingegeben haben, wird das schließende Tag automatisch eingefügt.

Emmet mit grundlegendem HTML in .jsx-Dateien

Funktioniert aus dem Kasten heraus.

Emmet mit Basis-HTML in .js-Dateien:

Fügen Sie die folgende Einstellung hinzu, die für Emmet-Abkürzungsvorschläge erforderlich und für die Registerkartenerweiterung erforderlich ist, damit sie konsistent funktioniert.

  "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 bei dieser Einstellung alle Wörter als benutzerdefinierte Tags erweitert (nicht nur als Komponentennamen).

Wenn Sie Emmet verwenden, um Komponenten als benutzerdefinierte Tags zu erweitern, müssen Sie tatsächlich den Komponentennamen aus der Vorschlagsliste auswählen und diesen zuerst ausfüllen (oder den gesamten Namen manuell eingeben und das Vorschlagsmenü mit der Esc-Taste schließen). Nachdem das Word erweitert wurde, müssen Sie erneut auf die Registerkarte klicken, damit Emmet das benutzerdefinierte Tag erweitert.

Es gibt ein aktive Funktionsanforderung , um diesen zusätzlichen Schritt möglicherweise zu entfernen (wird automatisch erweitert, wenn der Vorschlag ausgewählt wird, damit er genauso arbeitet 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"
],
1
jabacchetta

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

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

Und jetzt haben Sie Nizza automatisch schließende JSX-Tags!

1
bildungsroman

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

Ich habe die Einstellungen überprüft und festgestellt, dass diese Einstellungen das alles ruinieren.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

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

0
Oleg Shkliaiev

Ich habe alle Antworten geworfen und diese Config hat für mich funktioniert. musste sowohl Sprache als auch SyntaxProfile hinzufügen. Ohne die Triggererweiterung funktionierte nichts, aber jetzt drücke ich nur die Tab-Taste, um das Ergebnis zu erhalten.

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