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


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


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


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


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.


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

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.


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)

3

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

Für mich geht das.


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.


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.


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.


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 !!!

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.