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;
ESC
GIF nicht ersichtlich ist, ist, dass er drückt , um das Intellisense-Fenster manuell zu verlassen, bevor er drücktTAB
, um die automatische Vervollständigung zu erhalten."emmet.syntaxProfiles": { "javascript": "jsx" }
Ihren Benutzereinstellungen hinzu…"emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "javascript": "javascriptreact" }
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.
quelle
Editor: Quick Suggestions Delay
. Wenn Sie diesen Wert auf 600 setzen, können Sie das Element -> Tabulator drücken -> Voila eingeben.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 :
quelle
Wählen Sie einfach den entsprechenden Sprachmodus unten rechts auf dem Bildschirm aus: Stellen Sie JavaScript React ein.
quelle
2018
Ich benutze
VSCode
(ver 1.27.2)
Basiere auf meiner Erfahrung, obwohl ich mit arbeite
React
. Die erkannte Sprache auf meinerVSCode
ist immer noch VanilleJavaScript
. Und emmet hat nicht funktioniert.VSCode
erkannte Sprache in zu ändernJavaScript React
. Dies gilt nur für einzelneJS
Dateien.Klicken
Configure File Association for .js...
Und wählen Sie aus
JSX
, was ich in meinem Fall bereits getan habe.ctrl + , (comma)
, um es zu öffnen.Geben Sie ein und suchen Sie nach
emmet
oderEmmet
. 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,
jsx
nur zu verwendenjavascriptreact
.Ich habe den zweiten und dritten Schritt implementiert. Und das kann ich jetzt tun
Emmet
.quelle
Keine dieser Lösungen hat funktioniert ... aber die Auto Close Tag-Erweiterung funktioniert! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
quelle
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" ],
quelle
Ich habe das Problem einfach durch Ausführen der folgenden Schritte gelöst:
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 .
quelle
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.
quelle
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
quelle
Ich brauchte zwei Schritte, um automatisch schließende Tags in JSX zu erhalten.
"emmet.includeLanguages"
formulahendry.auto-close-tag
)Und jetzt haben Sie schöne JSX-Tags zum automatischen Schließen!
quelle
Befolgen Sie nur diese beiden Schritte:
1. Schritt
2. Schritt
"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true
3. Schritt
quelle
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
quelle
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
quelle
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" },
quelle
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 ;)
quelle