Saltar al contenido

¿Cómo habilitar la verificación/validación de errores HTML de VS Code?

Tatiana, parte de nuestro staff, nos ha hecho el favor de escribir esta crónica ya que domina muy bien el tema.

Solución:

VSCode no tiene validación de HTML por defecto. Pero le permite agregar extensiones y habilitar estas funciones.

Para agregar validación HTML (linting), abra VSCode, luego presione Ctrl + P y luego pegar ext install HTMLHint en él, y presione enter. Instalará un validador de HTML. Es posible que deba volver a cargar VSCode 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.

El formato de código de soporte predeterminado de VS Code y rastrea el error sintáctico. Si crea un nuevo archivo e intenta directamente escribir el código, entonces VS Code no podrá comprender qué idioma o tipo de sintaxis desea formatear/corregir el usuario. Por lo tanto, primero debe guardar el nuevo archivo con la extensión adecuada para que Visual Studio identifique correctamente la sintaxis.

El formato del código está disponible en VS 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 Auto Close Tag del mercado de VS Code.

Inicie VS Code Quick Open (Ctrl+P), pegue el siguiente comando y presione Intro.

  1. Agregue automáticamente una etiqueta de cierre HTML/XML, igual que Visual Studio IDE o Sublime Text

    ext install auto-close-tag
    
  2. Integración de VS 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 la clase HTML attribute basado en los archivos CSS en su espacio de trabajo. También es compatible con className de React attribute.

    ext install html-css-class-completion
    

valoraciones y comentarios

Si piensas que te ha sido útil nuestro artículo, agradeceríamos que lo compartas con el resto desarrolladores de este modo contrubuyes a difundir esta información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *