VSCode no completa automáticamente HTML

85

Tengo problemas con mi nuevo código de Visual Studio instalado en Windows 7. En Mac, el editor cierra automáticamente las etiquetas html, pero no en Win7. Supongo que debe haber alguna opción para encenderlo, pero no puedo encontrar ninguna.

Estoy hablando de cuando, por ejemplo. <htmlCuando escribe el intelliSense aparece y hace clic en Intro, por lo general automáticamente pone que la </html>mina no funciona. (El IntelliSense aparece, pero cuando se selecciona una de las opciones no es así auto cerrar la etiqueta: <h1> -> </h1>)

html intellisense visual-studio-code Harvey3589661
fuente
1.Puede usar la etiqueta de cierre automático , puede cumplir con sus requisitos.
jialin wang
2
2.introduzca un nombre de etiqueta como div , luego ingrese la tecla de tabulación dos veces, se completará automáticamente la etiqueta whoe -----> <div> </div>
jialin wang

Respuestas:

40

De las notas de la versión 0.3.0

El cierre automático de etiquetas HTML ahora se ha eliminado y reemplazado con IntelliSense más inteligente activado </.

John Papa
fuente
5
Oh, eso no es algo que esperaba. ¿Hay alguna forma de traerlo de vuelta? ¿Modificar algunos archivos o descargar algo? Me gustaría usar VSCode pero con finalización automática. Gracias.
Harvey3589661
56
También estaba buscando esto, pero noto que usar la pestaña funciona para mí en 0.10.6. Por ejemplo, escriba div(sin el <>), luego presione la pestaña de inmediato y entra <div></div>. No es exactamente lo mismo, pero puede ser útil. Doco para estos atajos (emmet) aquí
peterc
3
sí, eso se debe a Emmet. Emmet nos permite escribir los nombres de los elementos sin las llaves y agregará lo que sea necesario. Es realmente poderoso.
John Papa
1
Esto no me funciona en VS Code 1.5.3. Si escribo <div> entonces </ no cierra / completa la etiqueta. ¿Algo que me estoy perdiendo aquí?
Michael Giovanni Pumo
2
Simplemente escribir divsin <>y luego presionar la pestaña ya no funciona después de las últimas actualizaciones. ¿Hay alguna forma de volver a habilitar esto?
Kokodoko
170

Escriba el nombre de la etiqueta (sin comenzar <) y luego presione Tab

por ejemplo, escriba, divluego presione tab y VS lo convertirá a<div></div>

O escriba la etiqueta de apertura y luego presione Tab dos veces

por ejemplo :

  1. tipo <div
  2. presione Tab
  3. presione Tab

agregará la etiqueta de cierre

Rabolf
fuente
2
¿Qué pasa con las etiquetas de cierre automático (por ejemplo, <input />)?
Randall Flagg
1
simplemente escriba input y presione Tab dos veces, VS Code lo completará automáticamente en <input type = "text">
Amit Mittal
1
Solo quiero agregar que esto es parte de la funcionalidad de Emmet, que le permite generar fácilmente una estructura HTML más compleja, no solo pares de etiquetas. Para obtener ejemplos, puede leer esto , o simplemente buscar en Google para Emmet.
Alex Che
@Rabolf, ¿puedes mencionar algunos otros atajos geniales de HMTL para VS Code?
eMad
@eMAD desafortunadamente no continué usando VS Code
Rabolf
52

Estaba experimentando el mismo problema, luego vi algo en la parte inferior derecha del código vs ... en lugar de usar HTML, estaba usando Django-HTML, así que cambié el idioma a html, Boom, todo está funcionando bien nuevamente. ver imagen

Héroe de Siphamandla Ngwenya
fuente
Tuve un problema similar, pero en mi caso me di cuenta de que estaba escribiendo HTML en un archivo PHP. Supongamos que no podré utilizar etiquetas de cierre automático mientras lo haga.
Prometheus
21

Aquí hay un truco genial (en realidad, una abreviatura de Emmet) :

  • escribe el nombre de la etiqueta | p.ejh1
  • agregue un asterisco después de eso | p.ejh1*
  • prensa | (resultará en )Tab<h1></h1>

­

PD: esto también funciona para etiquetas de cierre automático, como - input, imgetc.

ɢʀᴜɴᴛ
fuente
1
@Kokodoko Sí, lo hace :P
ɢʀᴜɴᴛ
Eso es tan extraño ... No estoy seguro de qué configuración cambiar para volver a habilitarlo ...
Kokodoko
1
@Kokodoko deberías tener instalada la extensión emmet.
Sudhanshu
Esto funciona, pero no es necesario incluir el *. 1.21.0
Salsa
1
@BlueClouds sí y cualquiera de ellos que brinde soporte para abreviaturas html, debería funcionar. Por una regla genérica, uso el que tiene instalaciones máximas.
Sudhanshu
15

Puede probar esta extensión para VS Code. Ha implementado la función de etiqueta de cierre automático y cumpliría con sus requisitos:

  • Agregue automáticamente la etiqueta de cierre cuando escriba en el corchete de cierre de la etiqueta de apertura
  • Después de insertar la etiqueta de cierre, el cursor está entre la etiqueta de apertura y cierre
Jun Han
fuente
Esto es lo que necesitaba. Funciona como Brackets ahora, lo cual es genial. ¡Gracias!
Harvey3589661
Sí, pero ... estaba habilitado en versiones anteriores de VS Code. ¿No es esto solo un escenario en algún lugar del laberinto de settings.json?
Kokodoko
7

Encontré el mismo problema en Mac Sierra (10.12.6) con VSCode (1.30.2), mientras editaba un archivo HTML. De acuerdo con la documentación de vscode https://code.visualstudio.com/docs/languages/html , el intellisense debería funcionar de inmediato .

Resultó que la "Detección de idioma" (en la esquina derecha de la barra de estado del editor en la parte inferior de la pantalla) está configurada en Detección automática y reconoce el archivo como django-html. Cuando se vuelve a cambiar manualmente a HTML simple, todo funciona.

XX
fuente
5
  1. Presione Ctrl + Shift + P para abrir la paleta de comandos.
  2. Escriba 'Cambiar modo de idioma' en el buscador.
  3. Seleccione 'Cambiar modo de idioma' .
  4. Escriba 'HTML' en el buscador.
  5. Y seleccione 'HTML' (probablemente estaba configurado como 'django-html)
Khapi
fuente
3

Presione 𝐜𝐭𝐫𝐥+𝐬𝐡𝐢𝐟𝐭+𝐏-> escriba 𝐂𝐡𝐚𝐧𝐠𝐞 𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 𝐌𝐨𝐝𝐞 -> luego seleccione 𝐀𝐮𝐭𝐨 𝐃𝐞𝐭𝐞𝐜𝐭

Esto funciona para mi.

suvalakshmi
fuente
1
No veo nada nuevo en esta respuesta
Vega
2

Archivo> Preferencias> Mapas de teclas, busque 'Cierre automático' y haga clic en instalar. Si no funciona, vuelva a cargar el complemento.

Dheemanth Bhandarkar
fuente
1

Estaba sufriendo el mismo problema, luego desinstalé extensiones innecesarias de VS Code junto con la extensión JavaScript (SE) y funcionó para mí.

5hifaT
fuente
0

Presione Ctrl + Shift + Ppara abrir el comando. Luego, escriba Change Language Modeun idioma seleccionado HTMLo cualquier otro idioma deseado.

Ali
fuente
0

Sólo tienes que comprobar la parte inferior de su vscode y cambiar el modo de idioma a HTML Podría haber estado mostrando django-html o haga clic en Ctrl + Shift + P para cambiar el modo de idioma de pantalla

Ahora haga clic en [!] + TAB listo!

Otobong
fuente