Automatische Vervollständigung von JSX oder HTML in Visual Studio Code

78

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;
bawa g
quelle

Antworten:

84

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)

Geben Sie hier die Bildbeschreibung ein

Andrii.Vandakurov
quelle
Könnten Sie bitte den letzten Teil etwas näher erläutern? Ich muss js als Erweiterung aller meiner Reaktionsdateien verwenden.
Axel
1
Was aus dem ESCGIF nicht ersichtlich ist, ist, dass er drückt , um das Intellisense-Fenster manuell zu verlassen, bevor er drückt TAB, um die automatische Vervollständigung zu erhalten.
Josh McKearin
4
Wenn Sie einfachen Text bevorzugen, fügen Sie ihn "emmet.syntaxProfiles": { "javascript": "jsx" }Ihren Benutzereinstellungen hinzu…
Jake Rayson
9
"emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "javascript": "javascriptreact" }
Hab
162

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.

Julian Soro
quelle
1
"javascript": ["javascript", "javascriptreact"] - um es für .js- und .jsx-Dateien festzulegen.
Eduard
3
DAS FUNKTIONIERT! Jedoch! Wenn Sie Vorschläge aktiviert haben, wird durch Drücken der Registerkarte der oberste Vorschlag aus dieser Liste übernommen. Die Lösung hierfür besteht darin, eine Verzögerung für die Verwendung von Vorschlägen festzulegen Editor: Quick Suggestions Delay. Wenn Sie diesen Wert auf 600 setzen, können Sie das Element -> Tabulator drücken -> Voila eingeben.
Jscul
Danke für die Antwort! Es hat einfach wie ein Zauber funktioniert!
Manikantha Nekkalapudi
47

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"}

Kehkashan Fazal
quelle
Das hat bei mir funktioniert;)
Sanket Utekar
25

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

Donskikh Andrei
quelle
2
Richtig, ich bin sicher, dass Sie dies für jede Datei in einem großen Projekt tun möchten, jedes Mal, wenn Sie VS-Code erneut öffnen ...
Julian Soro
Ja, lustig =) Nach dem Update wird standardmäßig jsx + emmet unterstützt.
Donskikh Andrei
1
Welche Unterstützung standardmäßig?
Muhammad Umer
9

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.

vscode-Optionen

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

zwei

Klicken Configure File Association for .js...

drei

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

vier

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

die Einstellungen

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

RoCk RoCk
quelle
7

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"
],
Jabacchetta
quelle
6

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 .

Esin ÖNER
quelle
6

Einfache Antwort im Jahr 2020

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

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. Geben Sie hier die Bildbeschreibung ein

Davis Jones
quelle
4

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

zakaria kasmi
quelle
2

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!

bildungsroman
quelle
2

Befolgen Sie nur diese beiden Schritte:

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

1. Schritt

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

2. Schritt

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

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

3. Schritt

Ameer Hamza
quelle
1

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
user9083221
quelle
1

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

Oleg Shkliaiev
quelle
1

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"
},
Fatih Ertuğral
quelle
1

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 ;)

Pixelomo
quelle