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 «X» y «!» 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 «X«. El número de advertencias se muestra junto al icono «!«. También se pueden instalar extensiones que detectan más tipos de problemas, como se explica más adelante en esta lección.
Si Visual Studio Code detecta un problema (errores o advertencias), se muestra un valor distinto de cero.
Haga clic en los iconos para abrir el panel, que mostrará los errores detectados, ordenados por ficheros.
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 «!» 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.
Los errores «X» 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.
Luego de hacer las correcciones pertinentes se nos acomoda correctamente el código.
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.
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:
«attr-lowercase»: los nombres de los atributos deben escribirse en minúsculas. Se puede indicar una lista excepciones (por ejemplo, algunos atributos de las etiquetas SVG)
«attr-no-duplication»: los atributos no deben duplicarse
«attr-value-double-quotes»: los valores de los atributos deben escribirse entre comillas dobles
«doctype-first»: el documento debe incluir el preámbulo DOCTYPE
«id-unique»: los atributos id no deben repetirse
«spec-char-escape»: los caracteres especiales deben escribirse como entidades de carácter
«src-not-empty»: los atributos que hacen referencia a un elemento externo (src, href, data) no deben ser vacíos
«tag-pair»: las etiquetas deben cerrarse y estar correctamente anidadas
«tagname-lowercase»: los nombres de las etiquetas deben escribirse en minúsculas
«title-require»: el documento debe incluir el elemento <title> en <head>
Además, HTMLHint permite detectar otro tipos de errores (que están desactivados de forma predeterminada):
«alt-require»: las imágenes deben incluir el atributo alt
«attr-unsafe-chars»: los atributos no deben incluir caracteres «inseguros» [referencia: documentación de HTMLHint]
«attr-value-not-empty»: los atributos deben tener establecido algún valor
«doctype-html5»: el preámbulo DOCTYPE debe indicar el tipo html
«head-script-disabled»: no deben utilizarse etiquetas <script> en <head>
«href-abs-or-rel»: las direcciones deben ser absolutas (abs) o relativas (rel)
«id-class-ad-disabled»: los valores de los atributos id y class no deben contener la palabra «ad» (que bloquean los bloqueadores de publicidad)
«id-class-value»: los valores de los atributos id y class deben utilizar guiones bajos (underline), guiones (dash) o camelCase (hump)
«inline-script-disabled»: los atributos no deben contener scripts
«inline-style-disabled»: no se debe utilizar el atributo style
«space-tab-mixed-disabled»: el sangrado debe contener únicamente espacios (space), cuatro espacios (space4) o tabuladores (tab)
«style-disabled»: no se deben utilizar etiquetas <style>
«tag-self-close»: las etiquetas vacías deben incluir el carácter final /
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).
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.
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:
Errores (errors)
Los errores deben corregirse necesariamente, porque la hoja de estilo no puede interpretarse correctamente mientras contenga estos errores.
Avisos (warnings)
Los avisos deben tomarse como lo que son: consejos, que en unos casos es conveniente seguir, pero en otros casos no, ya que puede haber motivos para estar en desacuerdo con ellos o pueden ser consejos pensados para hojas de estilo complejas, no hojas de estilo sencillas como las que se utilizan en este curso. A medida que el alumno vaya adquiriendo experiencia, podrá ir juzgando por sí mismo si seguir o no esos consejos.
Ignorar (ignore)
Se ignora la regla y no se muestra ningún mensaje al usuario.