VSCode vervollständigt HTML nicht automatisch

85

Ich habe Probleme mit meinem neu installierten Visual Studio-Code unter Windows 7. Auf dem Mac schließt der Editor automatisch HTML-Tags, auf meinem Win7 jedoch nicht. Ich gehe davon aus, dass es eine Option zum Einschalten geben muss, aber ich kann keine finden.

Ich spreche darüber, wann z. Das Schreiben <htmldes IntelliSense wird angezeigt und Sie klicken auf die Eingabetaste. In der Regel wird automatisch die Funktion der </html>Mine aktiviert . (Die IntelliSense erscheint aber , wenn Sie eine der Optionen wählen Sie es nicht automatisch schließen den Tag: <h1> -> </h1>)

html intellisense visual-studio-code Harvey3589661
quelle
1. Sie können das Auto Close Tag verwenden , um Ihre Anforderungen zu erfüllen.
Jialin Wang
2
2.Geben Sie einen Tag-Namen wie div ein und geben Sie die Tabulatortaste zweimal ein. Dadurch wird das whoe-Tag automatisch vervollständigt. -----> <div> </ div>
jialin wang

Antworten:

40

Aus den Versionshinweisen zu 0.3.0

Das automatische Schließen von Tags durch HTML wurde entfernt und durch intelligenteres IntelliSense ersetzt </.

John Papa
quelle
5
Oh, darauf habe ich nicht gehofft. Gibt es eine Möglichkeit, es zurückzubringen? Einige Dateien ändern oder etwas herunterladen? Ich möchte VSCode verwenden, aber mit automatischer Vervollständigung. Vielen Dank.
Harvey3589661
56
Ich habe auch danach gesucht, aber ich stelle fest, dass die Verwendung von Tabs in 0.10.6 für mich funktioniert. ZB tippe div(ohne <>), drücke dann sofort die Tabulatortaste und es tritt ein <div></div>. Nicht genau das gleiche, kann aber von Nutzen sein. Doco für diese Abkürzungen (emmet) hier
Peterc
3
Ja, das liegt an Emmet. Emmet lässt uns Elementnamen ohne geschweifte Klammern eingeben und fügt hinzu, was benötigt wird. Es ist wirklich mächtig.
John Papa
1
Dies funktioniert bei mir unter VS Code 1.5.3 nicht. Wenn ich <div> eingebe, </ wird das Tag nicht geschlossen / vervollständigt. Fehlt mir hier etwas?
Michael Giovanni Pumo
2
Nur divohne zu tippen <>und dann die Tabulatortaste zu drücken, funktioniert nach den letzten Updates nicht mehr. Gibt es eine Möglichkeit, dies wieder zu aktivieren?
Kokodoko
170

Geben Sie den Tag-Namen ein (ohne zu starten <) und drücken Sie die Tabulatortaste

Geben Sie beispielsweise die divTabulatortaste ein und VS konvertiert sie in<div></div>

Oder geben Sie das Eröffnungs-Tag ein und drücken Sie zweimal die Tabulatortaste

zum Beispiel :

  1. Art <div
  2. Drücken Sie die Tabulatortaste
  3. Drücken Sie die Tabulatortaste

Es wird das schließende Tag hinzugefügt

Rabolf
quelle
2
Was ist mit selbstschließenden Tags (z. B. <input />)?
Randall Flagg
1
Geben Sie einfach die Eingabe ein und drücken Sie zweimal die Tabulatortaste. VS Code vervollständigt sie automatisch zu <input type = "text">
Amit Mittal
1
Ich möchte nur hinzufügen, dass dies Teil der Emmet-Funktionalität ist, mit der Sie auf einfache Weise komplexere HTML-Strukturen generieren können, nicht nur Tag-Paare. Beispiele können Sie lesen dies , oder einfach nur Google für Emmet.
Alex Che
@ Rabolf können Sie einige andere coole HMTL-Verknüpfungen für VS Code erwähnen?
eMad
@eMAD leider habe ich VS Code
Rabolf
52

Ich hatte das gleiche Problem, dann sah ich unten rechts im Vergleich zu Code etwas. Anstatt HTML zu verwenden, verwendete ich Django-HTML, also änderte ich die Sprache in HTML. Boom, alles funktioniert wieder einwandfrei. siehe Bild

Siphamandla Held Ngwenya
quelle
Hatte ein ähnliches Problem, aber in meinem Fall wurde mir klar, dass ich HTML in eine PHP-Datei schrieb. Angenommen, ich kann Autoclosing-Tags nicht verwenden, solange ich es bin.
Prometheus
21

Hier ist ein cooler Trick (eigentlich eine Emmet-Abkürzung) :

  • Schreiben Sie den Tag-Namen | z.Bh1
  • fügen Sie ein Sternchen danach | z.Bh1*
  • Drücken Sie | (wird ergeben )Tab<h1></h1>

­

PS: Das funktioniert auch für selbstschließenden Tags, wie - input, imgusw.

ɢʀᴜɴᴛ
quelle
1
@ Kokodoko Ja, das tut es :P
ɢʀᴜɴᴛ
Das ist so seltsam ..... Ich bin nicht sicher, welche Einstellung ich ändern soll, um es wieder zu aktivieren ...
Kokodoko
1
@Kokodoko Sie sollten die Emmet-Erweiterung installiert haben.
Sudhanshu
Dies funktioniert, aber es ist nicht erforderlich, das einzuschließen *. 1.21.0
Sauce
1
@BlueClouds yes und alle, die Unterstützung für HTML-Abkürzungen bieten, sollten funktionieren. Nach einer generischen Regel verwende ich die mit max-Installationen.
Sudhanshu
15

Sie können diese Erweiterung für VS Code ausprobieren . Es hat die Auto-Close-Tag-Funktion implementiert und würde Ihre Anforderungen erfüllen:

  • Fügen Sie automatisch ein schließendes Tag hinzu, wenn Sie die schließende Klammer des öffnenden Tags eingeben
  • Nach dem Einfügen des schließenden Tags befindet sich der Cursor zwischen dem öffnenden und dem schließenden Tag
Jun Han
quelle
Das brauchte ich. Funktioniert jetzt wie Brackets, was großartig ist. Vielen Dank!
Harvey3589661
Ja, aber ... es wurde in früheren Versionen von VS Code aktiviert. Ist das nicht nur eine Einstellung irgendwo im Labyrinth von settings.json?
Kokodoko
7

Ich habe das gleiche Problem auf Mac Sierra (10.12.6) mit VSCode (1.30.2) beim Bearbeiten einer HTML-Datei festgestellt. Gemäß den vscode-Dokumentationen https://code.visualstudio.com/docs/languages/html sollte der Intellisense sofort funktionieren.

Es stellte sich heraus, dass die "Spracherkennung" (in der rechten Ecke der Editor-Statusleiste am unteren Bildschirmrand) auf "Automatische Erkennung" eingestellt ist und die Datei als erkannt hat django-html. Wenn manuell wieder auf einfaches HTML umgeschaltet wird, funktioniert alles.

XX
quelle
5
  1. Drücken Sie Strg + Umschalt + P , um die Befehlspalette zu öffnen.
  2. Geben Sie ‚Change Language Mode‘ im Sucher.
  3. Wählen Sie 'Sprachmodus ändern' .
  4. Geben Sie 'HTML' in den Sucher ein.
  5. Und wählen Sie 'HTML' (es wurde wahrscheinlich auf 'django-html' gesetzt)
Khapi
quelle
3

Presse 𝐜𝐭𝐫𝐥+𝐬𝐡𝐢𝐟𝐭+𝐏-> Typ in 𝐂𝐡𝐚𝐧𝐠𝐞 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 Mode -> wählen Sie dann Auto 𝐃𝐞𝐭𝐞𝐜𝐭

Für mich geht das.

Suvalakshmi
quelle
1
Ich sehe nichts Neues in dieser Antwort
Vega
2

Datei> Einstellungen> Keymaps, suchen Sie nach "Automatisch schließen" und klicken Sie auf "Installieren". Wenn es nicht funktioniert, laden Sie das Plugin neu.

Dheemanth Bhandarkar
quelle
1

Ich hatte das gleiche Problem, dann habe ich unnötige Erweiterungen von VS Code zusammen mit der JavaScript (SE) -Erweiterung deinstalliert und es hat bei mir funktioniert.

5hifaT
quelle
0

Drücken Sie Ctrl + Shift + P, um den Befehl zu öffnen. Geben Sie dann Change Language Modeeine Auswahl HTMLoder eine andere gewünschte Sprache ein.

Ali
quelle
0

Überprüfen Sie einfach den unteren Rand Ihres vscode und ändern Sie den Sprachmodus in HTML. Möglicherweise wurde django-html angezeigt, oder klicken Sie auf Strg + Umschalt + p, um den Sprachmodus zu ändern. Screenshot

Klicken Sie jetzt auf [!] + TAB voila es ist geschafft !!!

Otobong
quelle