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 Visual Studio Code Error y Visual Studio Code Warning acompañados de dos números que corresponden al número de problemas detectados por Visual Studio Code en los archivos abiertos. Visual Studio Code distingue entre errores y advertencias (en inglés, warnings), según la gravedad del problema detectado. El número de errores se muestra junto al icono Visual Studio Code Error. El número de advertencias se muestra junto al icono Visual Studio Code Warning. También se pueden instalar extensiones que detectan más tipos de problemas, como se explica más adelante en esta lección.

Visual Studio Code. Validación

Si Visual Studio Code detecta un problema (errores o advertencias), se muestra un 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.

Las advertencias Visual Studio Code Warning corresponden 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 que corresponde a una mala práctica (en este caso, el dejar reglas vacías en la hoja de estilo), pero que no provoca ningún problema real.

Visual Studio Code. Validación

Los errores Visual Studio Code Error corresponden generalmente a 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 de los que realmente existen, por eso se aconseja resolver los problemas en orden, para que al corregir uno, desaparezcan los siguientes errores provocados por 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

Errores de sintaxis

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.

Consejos

Además, Visual Studio Code también incluye un validador de hojas de estilo basado parcialmente 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 predeterminada de Visual Studio Code es la siguiente:

Referencias