¿Cómo puedo habilitar la verificación y validación de errores HTML de Visual Studio Code?

Me acabo de cambiar a Visual Studio Code para el desarrollo web de NetBeans y estoy encontrando mi camino. En NetBeans, si olvido el corchete de cierre en un nombre de etiqueta, indicará mi error con un subrayado ondulado rojo y la alerta en el margen izquierdo.

Hubiera pensado que la verificación de errores es una función fundamental en un editor de desarrollo web como Visual Studio Code. Tal vez simplemente no estoy encontrando la opción o extensión correcta.

¿Cómo puedo lograr este mismo comportamiento de comprobación de errores de HTML y CSS en Visual Studio Code?

Visual Studio Code no tiene validación de HTML de forma predeterminada. Pero le permite agregar extensiones y habilitar estas funciones.

Para agregar validación HTML (linting), abra Visual Studio Code y luego presione Control + PAG. Luego pega ext install HTMLHint en él, y presione Ingresar. Instalará un validador de HTML. Es posible que deba volver a cargar Visual Studio Code para cargar la extensión.

Ahora, si abre el mismo documento HTML en el que tuvo el error de sintaxis, debería ver que hay un problema que se muestra en la barra de estado en la parte inferior :), y también le mostrará los errores en esas líneas.

Visual Studio Code de forma predeterminada admite el formato de código y realiza un seguimiento de los errores sintácticos. Si crea un nuevo archivo e intenta escribir el código directamente, Visual Studio Code no podrá comprender qué idioma o tipo de sintaxis desea formatear o corregir el usuario.

Por lo tanto, primero debe guardar el nuevo archivo con la extensión adecuada y luego Visual Studio Code puede identificar correctamente la sintaxis.

El formato del código está disponible en Visual Studio Code a través de los siguientes accesos directos:

• en ventanas Cambio + alternativa + F
• En Mac Cambio + Opción + F
• en Ubuntu Control + Cambio + I

Puedes añadir Etiqueta de cierre automático del mercado de Visual Studio Code.

Inicie Visual Studio Code Quick Open (Control + PAG), pegue el siguiente comando y presione Ingresar.

1. Agregue automáticamente la etiqueta de cierre HTML/XML, igual que Visual Studio IDE o Texto sublime

   ext install auto-close-tag
   

2. Integración de Visual Studio Code para HTMLHint: una herramienta de análisis de código estático para HTML

   ext install HTMLHint
   

3. Proporciona finalización de nombre de clase CSS para el atributo de clase HTML en función de los archivos CSS en su espacio de trabajo. también es compatible ReaccionarEl atributo className de .

   ext install html-css-class-completion
   

Esta no es una funcionalidad integrada de Visual Studio Code… Sin embargo, tiene muchos complementos disponibles. Te recomendaría el complemento HTMLHint. Eso es lo que he estado usando.

Puedes instalarlo usando el ext install HTMLHint dominio.

Encontré que la extensión Validación W3C (aunque no le permite extender las reglas integradas) funciona mejor que HTMLHint para verificar la validez de HTML.

Id: umoxfo.vscode-w3cvalidación

Descripción: agrega soporte de validación W3C a Visual Studio Code.

Versión: 2.3.0

Editorial: Umoxfo VS

Hay una extensión para Visual Studio Code que es HTMLHint.
Puede instalarlo siguiendo las instrucciones a continuación.

1. Para abrir las extensiones:marketplace, presione Control + Cambio + X
2. Escriba HTMLHint en el cuadro de extensión de búsqueda
3. Haga clic en el botón de instalación en el resultado de búsqueda que muestra HTMLHint desarrollado por “Mike Kaufman”

Como se informa aquí que HTMLHint es problemático (muchos errores, pequeñas actualizaciones), encontré y probé HTML-validarque tiene un Extensión de código de Visual Studio.

Se supone que este último es independiente, pero cuando lo instalé, se quejó y me dijo que instalara HTML-validate globalmente; Lo hice, y la extensión parece funcionar bastante bien y tener una buena capacidad de personalización, como un ESLint Por ejemplo.