VSCode non completa automaticamente l'HTML

87

Ho problemi con il mio nuovo Visual Studio Code installato su Windows 7. Su Mac l'editor chiude automaticamente i tag html ma sul mio Win7 no. Presumo che ci debba essere qualche opzione per accenderlo ma non riesco a trovarne nessuna.

Sto parlando di quando ad es. la scrittura di <htmlintelliSense si apre e fai clic su Invio, di solito si inserisce automaticamente nella </html>miniera non funzionante. (L'IntelliSense si apre, ma quando si seleziona una delle opzioni che non si auto vicino il tag: <h1> -> </h1>)

html intellisense visual-studio-code

— Harvey3589661
fonte

1.È possibile utilizzare Tag di chiusura automatica , può soddisfare le tue esigenze.

— jialin wang

2

2.inserisci un nome tag come div , quindi inserisci il tasto tab due volte, completerà automaticamente il tag whoe -----> <div> </div>

— jialin wang

42

Dalle note sulla versione 0.3.0

La chiusura automatica HTML dei tag è stata ora rimossa e sostituita con IntelliSense più intelligente </.

— John Papa
fonte

5

Oh, non è qualcosa che speravo. C'è un modo per riportarlo indietro? Modificare alcuni file o scaricare qualcosa? Vorrei usare VSCode ma con completamento automatico. Grazie.

— Harvey3589661

56

Stavo cercando anche questo, ma ho notato che l'utilizzo di schede funziona per me in 0.10.6. Ad esempio, digita div(senza il <>), quindi premi subito il tasto Tab ed entra <div></div>. Non esattamente la stessa cosa, ma potrebbe essere utile. Doco per queste scorciatoie (emmet) qui

— peterc

3

sì, questo è dovuto a Emmet. Emmet ci consente di digitare i nomi degli elementi senza le parentesi graffe e aggiungerà ciò che è necessario. È davvero potente.

— John Papa

1

Questo non funziona per me su VS Code 1.5.3. Se digito <div>, </ non chiude / completa il tag. Qualcosa che mi manca qui?

— Michael Giovanni Pumo

2

Basta digitare divsenza <>e quindi premere TAB non funziona più dopo gli ultimi aggiornamenti. C'è un modo per riattivarlo?

— Kokodoko

173

Digita il nome del tag (senza iniziare <) quindi premi Tab

ad esempio digita divquindi premi tab e VS lo convertirà in<div></div>

Oppure digita il tag di apertura, quindi premi Tab due volte

per esempio :

genere <div
premere Tab
premere Tab

aggiungerà il tag di chiusura

— Rabolf
fonte

2

E i tag a chiusura automatica (ad esempio <input />)?

— Randall Flagg

1

basta digitare input e premere Tab due volte, VS Code lo completerà automaticamente in <input type = "text">

— Amit Mittal

1

Voglio solo aggiungere che questo fa parte della funzionalità Emmet, che ti consente di generare facilmente strutture HTML più complesse, non solo coppie di tag. Per esempi puoi leggere questo , o semplicemente google per Emmet.

— Alex Che

@Rabolf puoi menzionare altre fantastiche scorciatoie HMTL per VS Code?

— eMad

@eMAD purtroppo non ho continuato a utilizzare VS Code

— Rabolf

56

Stavo riscontrando lo stesso problema, poi ho visto qualcosa in basso a destra di vs code .. invece di usare HTML, stavo usando Django-HTML, quindi ho cambiato la lingua in html, Boom tutto funziona di nuovo bene. vedi immagine

— Siphamandla Hero Ngwenya
fonte

Ho avuto un problema simile, ma nel mio caso mi sono reso conto che stavo scrivendo HTML in un file PHP. Supponiamo che non sarò in grado di utilizzare la chiusura automatica dei tag per tutto il tempo in cui lo sarò.

— Prometeo

1

non è necessario cambiare lingua, aggiungi solo a settings.json "emmet.includeLanguages": {"django-html": "html"}

— raultedesco

Ho corretto i miei modelli Twig non intellisensing HTML grazie al commento di @raultedesco sopra. Ctrl+Shift+p-> apriPerferences: Open Settings (UI) -> cerca includedLanguages-> trova le lingue incluse in Emmet -> input Item: twig; Value: html-> premi Add item-> divertiti.

— Valentine Shi

22

Ecco un trucco interessante (in realtà un'abbreviazione di Emmet) :

scrivi il nome del tag | per esempioh1
aggiungi un asterisco dopo di che | per esempioh1*
stampa | (risulterà in )Tab<h1></h1>

_{PS: funziona anche per tag a chiusura automatica, come - input, imgecc.}

— ɢʀᴜɴᴛ
fonte

1

@Kokodoko Sì lo fa :P

— ɢʀᴜɴᴛ

È così strano ..... Non sono sicuro di quale impostazione cambiare per riattivarlo ...

— Kokodoko

1

@ Kokodoko dovresti avere installato l'estensione emmet.

— Sudhanshu

1

Funziona, ma non è necessario includere il file *. 1.21.0

— Salsa

1

@BlueClouds sì e tutti quelli che forniscono il supporto per le abbreviazioni html dovrebbero funzionare. In base a una regola generica, utilizzo quello con il numero massimo di installazioni.

— Sudhanshu

15

Potresti provare questa estensione per VS Code. Ha implementato la funzione tag di chiusura automatica e soddisfare le tue esigenze:

Aggiungi automaticamente il tag di chiusura quando digiti la parentesi di chiusura del tag di apertura
Dopo aver inserito il tag di chiusura, il cursore si trova tra il tag di apertura e quello di chiusura

— Jun Han
fonte

Questo è ciò di cui avevo bisogno. Funziona come Brackets ora, il che è fantastico. Grazie!

— Harvey3589661

Sì, ma ... era abilitato nelle versioni precedenti di VS Code. Non è solo un'ambientazione da qualche parte nel labirinto di settings.json?

— Kokodoko

7

Ho riscontrato lo stesso problema su Mac Sierra (10.12.6) con VSCode (1.30.2), durante la modifica di un file HTML. Secondo le documentazioni vscode https://code.visualstudio.com/docs/languages/html , l'intellisense dovrebbe funzionare fuori dagli schemi.

Si è scoperto che il "Rilevamento lingua" (nell'angolo destro della barra di stato dell'editor nella parte inferiore dello schermo) è impostato su Rilevamento automatico e ha riconosciuto il file come django-html. Quando si torna manualmente al semplice Html, tutto funziona.

— XX
fonte

5

Premi Ctrl + Maiusc + P per aprire la tavolozza dei comandi.
Digita "Cambia modalità lingua" nel motore di ricerca.
Seleziona "Cambia modalità lingua" .
Digita "HTML" nel motore di ricerca.
E seleziona "HTML" (probabilmente era impostato su "django-html)

— Khapi
fonte

3

Premere 𝐜𝐭𝐫𝐥+𝐬𝐡𝐢𝐟𝐭+𝐏-> digitare 𝐂𝐡𝐚𝐧𝐠𝐞 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 𝐌𝐨𝐝𝐞 -> quindi selezionare 𝐀𝐮𝐭𝐨 𝐃𝐞𝐭𝐞𝐜𝐭

Per me funziona.

— suvalakshmi
fonte

1

Non vedo nulla di nuovo in questa risposta

— Double Expresso

2

File> Preferenze> Mappe dei tasti, cerca "Chiusura automatica" e fai clic su Installa. Se non funziona, ricarica il plugin.

— Dheemanth Bhandarkar
fonte

1

Soffrivo dello stesso problema, quindi ho disinstallato estensioni non necessarie da VS Code insieme all'estensione JavaScript (SE) e ha funzionato per me.

— 5hifaT
fonte

0

Premere Ctrl + Shift + Pper aprire il comando. Quindi, digita Change Language Modeuna selezione HTMLo qualsiasi altra lingua desiderata.

— Ali
fonte

0

Controlla semplicemente la parte inferiore del tuo vscode e cambia la modalità della lingua in HTML Potrebbe essere stato mostrato django-html o fai clic su ctrl + maiusc + p per cambiare la modalità della lingua Screenshot

Ora fai clic su [!] + TAB voilà è fatto !!!

— Otobong
fonte

0

Se digiti

div.class

e quindi premere TAB , il codice VS chiuderà automaticamente il tag DIV con la CLASSE data

Ma penso che tu voglia fare questa operazione premendo il tasto INVIO .

In tal caso, vai alle impostazioni utente di VS Code e incolla il codice seguente:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "jade"
}

Ora se scrivi

div.class

e poi premi il tasto INVIO , puoi vedere la magia.

Tuttavia, il codice sopra renderà il tuo codice VS auto-completamento con il tasto INVIO non solo per il normale HTML ma anche il JSX di React , i frammenti di Vue.js copriranno anche questo.

Ma se vuoi farlo solo per file HTML, è sufficiente la seguente riga:

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

Saluti..

— IFTEKHAR I ASIF
fonte