El ajuste de etiquetas ayuda a marcar y estructurar el código sin tener que escribir manualmente las etiquetas de apertura y cierre. Esto ahorra mucho tiempo y reduce la incidencia de errores de sintaxis.

Formato

Formatear el código HTML es una buena forma de mantener la coherencia y la legibilidad en los proyectos. En VS Code, las opciones de formato integradas permiten que la acción se realice automáticamente en HTML siguiendo reglas predefinidas.

El método abreviado de teclado utilizado para formatear HTML es Mayús+Alt+F para Windows y Linux. Mayús+Opción+F funciona en macOS.

El acceso directo puede formatear un documento HTML completo o una parte del código. Cuando lo presionas, se aplican las reglas de formato. El espaciado de sangría y los saltos de línea se ajustan en consecuencia.

También puede formatear automáticamente el código en VS Code.

Puede comentar o descomentar en una sola línea o en varias líneas de código seleccionadas al mismo tiempo. Si ya existe un comentario, el acceso directo lo elimina y, si no está comentado, se agregan los comentarios. Los comentarios en HTML están encerrados en etiquetas .

Navegación de código

Esto se refiere a la capacidad de moverse entre las diferentes partes del código base o saltar directamente a definiciones en los atributos o etiquetas HTML. Utilizando el Ctrl+] opción en Linux y Windows para navegar a través de etiquetas. Los usuarios de Mac pueden utilizar comando+] para ir a la etiqueta de cierre del elemento. Para saltar a la etiqueta de apertura, presione Ctrl+[[ para Windows y Linux o comando +[[ para Mac.

Para saltar a la definición de un atributo o etiqueta, utilice el F12 llave. Identifica la etiqueta de cierre o apertura correspondiente de la base de código para encontrar la ubicación correcta.

Aún accederá a la definición cuando mantenga presionada la tecla Control y haga clic en un atributo o etiqueta HTML en Windows. Prensa Comando+clic en macOS para la misma acción. Esto elimina la necesidad de buscar la ubicación manualmente.

Modo Zen

Este modo no tiene distracciones. Facilita a los desarrolladores centrarse por completo en el código al ocultar botones y barras de herramientas. Active este modo usando el Ctrl+KZ acceso directo en Windows y Comando+KZ en Mac. Alternativamente, vaya a Vista y luego Apariencia. Activar modo zen aquí.

Paleta de comandos

Esta es una característica ampliamente utilizada en VS Code y es especialmente útil para principiantes. Representa cada opción de configuración, acceso directo y funcionalidad y tiene forma de lista.

Todo lo que tienes que hacer es escribir lo que quieres hacer dentro de la paleta de comandos. Recibirás diferentes comandos para ayudarte.

Para acceder a la paleta de comandos, utilice el Ctrl+Mayús+P acceso directo para Windows. El acceso directo de Mac es Cmd+Mayús+P.

Buscar archivos

Si hay texto que necesita ubicado en los archivos del proyecto actual, puede acceder a él haciendo clic en el ícono Buscar en la barra lateral. Alternativamente, utilice el Ctrl+Mayús+F acceso directo en Windows o Cmd+Mayús+F en Mac.

Eliminar la palabra anterior

Cuando mantienes presionada la barra de retroceso para eliminar una palabra, puedes eliminar accidentalmente otras partes. Para limitar la eliminación a la palabra anterior, utilice el Ctrl+Retroceso acceso directo en Windows o Cmd+Retroceso en Mac.

Copiar línea

Durante el desarrollo, los programadores a veces necesitan copiar y pegar líneas en otras partes del proyecto. Luego se pueden hacer pequeñas modificaciones en las líneas según sea necesario. Un atajo de teclado es una buena forma de acelerar este proceso, especialmente si lo hace con regularidad.

El acceso directo de Windows es Mayús+alt+arriba o Mayús+alt+abajo. Para Mac, el acceso directo es Optar+cambiar+arriba o Optar+mayús+abajo.

Reabrir el editor cerrado

Si está manejando un proyecto HTML enorme con muchos archivos, puede resultar frustrante cerrar una pestaña accidentalmente. Afortunadamente, puedes usar un atajo para abrir la última pestaña cerrada en VS Code

Para reabrir un editor cerrado, utilice el Ctrl+Mayús+T acceso directo en Windows o Comando + Mayús + T en Mac. Puede abrir varias pestañas cerradas usando este acceso directo.

Acelere la codificación con atajos HTML

Muchos atajos hacen que el uso del código VS sea relativamente más fácil. Si bien hay más opciones que las que aparecen en el artículo, las anteriores son algunas de las más comunes que los principiantes y los usuarios experimentados pueden encontrar útiles. Dada la popularidad de VS Code, aprovechar todas las funciones puede hacerlo más divertido. Elija atajos que utilice habitualmente para aumentar la velocidad de codificación.

A continuación, deberías aprender a comparar dos archivos en VS Code.

Preguntas frecuentes

P: ¿Los atajos HTML se pueden personalizar en VS Code?

A: Sí. Puede personalizar los accesos directos HTML en VS Code cambiando la configuración de su usuario o espacio de trabajo.

P: ¿Puedo crear mis propios atajos HTML personalizados en VS Code?

A: Sí. Puede crear fragmentos de HTML o accesos directos personalizados en VS Code definiéndolos en la configuración del usuario o del espacio de trabajo. Esto le permite crear accesos directos para patrones de código o elementos personalizados de uso frecuente.