Visual Studio Code. Validación de HTML y CSS

Visual Studio Code no realiza validaciones completas de las páginas web ni de las hojas de estilo, pero puede ayudar a corregir algunos errores en estos archivos.

Interfaz de validación en Visual Studio Code

En la barra lateral se muestran dos iconos acompañados de dos números que corresponden al número de errores y avisos detectados por Visual Studio Code en los archivos abiertos. Si no se ha detectado ningún error ni problema, se muestran ceros. Visual Studio Code detecta por él mismo algunos tipos de errores y avisos detectados, pero se pueden instalar extensiones que detectan errores y avisos adicionales, como se explica más adelante en esta lección.

Visual Studio Code. Validación

Si Visual Studio Code detecta un error, se muestra el valor distinto de cero.

Visual Studio Code. Validación

Haga clic en los iconos para abrir el panel, que mostrará los errores detectados, ordenados por ficheros.

Visual Studio Code. Validación

Haga clic en el error para mostrar en el editor el documento correspondiente y la línea en la que se ha identificado el problema. Tenga en cuenta que Visual Studio Code muestra la línea en la que ha identificado el problema, pero el origen del problema puede estar en esa línea o en una línea anterior.

El icono de la derecha (triángulo con exclamación) corresponde a avisos de todo tipo, que en general se aconseja corregir, pero que a menudo no impiden que el documento se muestre correctamente. Por ejemplo, la captura siguiente muestra un aviso (regla vacía) que corresponde más a una buena práctica y no provoca ningún problema real.(

Visual Studio Code. Validación

El icono de la izquierda (círculo con cruz) corresponde a los errores de sintaxis que deben corregirse para que el documento sea válido y se pueda mostrar correctamente. A veces un error provoca que Visual Studio Code detecte más errores que realmente no existen. Por eso se aconseja resolver los problemas en orden, para que al corregir uno, desaparezcan los siguientes errores que provocaba el anterior.

Visual Studio Code. Validación

Cuando se corrigen los errores y avisos, la pestaña Problemas del panel indica que no hay problemas en los archivos abiertos. Puede cerrar el panel haciendo clic en los iconos de la barra lateral o en el icono en forma de cruz situado en la parte superior derecha del panel.

Visual Studio Code. Validación

Validación de HTML en Visual Studio Code

Las páginas web se pueden validar en Visual Studio Code mediante la extensión HTMLHint. Esta extensión instala y utiliza el analizador de código estático HTMLHint. Este validador no detecta todos los posibles errores, pero sí los más importantes.

La configuración recomendada para seguir el curso Páginas web HTML y hojas de estilo CSS de mclibre.org se encuentra en la lección Configuración recomendada para HTML y CSS.


Los tipos de errores detectados de forma predeterminada por la extensión HTMLHint son los siguientes:

Además, HTMLHint permite detectar otro tipos de errores (que están desactivados de forma predeterminada):

El valor de cada propiedad suele true (activada) o false (desactivada), salvo en los casos en que ofrece más posibilidades (en la explicación anterior los valores se han indicado entre paréntesis).

Notas:


Se puede modificar la configuración predeterminada de la extensión HTMLHint de dos maneras, detallando las opciones deseadas:

En ambos casos, sería necesario incluir las diez propiedades predeterminadas ya que dejan de aplicarse de manera predeterminada.

Validación de CSS en Visual Studio Code

Visual Studio Code detecta los errores de sintaxis en las hojas de estilo. Estos errores deben corregirse puesto que impiden que la hoja de estilo se interprete correctamente.

Además, Visual Studio Code también incluye un validador de hojas de estilo basado en CSS Lint que proporciona consejos que ayudan a mejorar las hojas de estilo.

En el archivo de Preferencias de configuración, Visual Studio Code permite especificar el tipo de mensaje mostrado al usuario para cada una de las reglas de validación disponibles:

La configuración recomendada para seguir el curso Páginas web HTML y hojas de estilo CSS de mclibre.org se encuentra en la lección Configuración recomendada para HTML y CSS.


La configuración predeterminada de Visual Studio Code es la siguiente: