3 min de lectura

Para mantener tu código ordenado, es una buena opción utilizar algún linter para tener un código limpio y entendible y en HTML no es la excepción. En internet puedes encontrar diferentes según lo que estes codeando, pero todos tienen el mismo fin: organizar tu código.

Pero, ¿porqué debería usar un linter?

Cuando nos encontramos revisando código, ya sea nuestro o de alguien más, siempre resulta complicado si no se sigue algún formato, ya que nunca sabes dónde empieza la_función_que_sirve y dónde termina. Y cuando realizas HTMLs, el ver tantas < > puede llegar a ser confuso, aún más sin la tabulación adecuada. Si en algún momento te haz topado con el mismo problema, quizá es hora de empezar a usar uno de los muchos linters que existen en la web.

En esta ocasión te mostraré uno que te servirá para que puedas tener tus HTMLs lindos y organizados.

HTMLHint

HTMLHint es un linter para HTML, es decir, herramienta que te ayuda a revisar los archivos html que tienes y según las reglas que tengas configuradas te mostrará los posibles errores que tu archivo contenga.

Instalación de HTMLHint:

Para instalarlo es necesario contar con:

Instalación global y local:

Para instalarlo localmente en la terminal, con NPM instalamos htmlhint:

O, de manera global:

Usando HTMLHint

Una vez que instalamos HTMLHint para usarlo dependerá de si se instaló local o globalmente.

En caso de haberlo instalado localmente deberás usar el siguiente comando:

O, si se instaló de manera global:

Configurando HTMLHint

Para agregar las reglas que seguirá tu proyecto debes crear un archivo llamado .htmlhintrc en el cual añadirás las reglas que desees seguir. En caso de no existir ningún archivo seguirá las reglas por default:

En el siguiente link podrás encontrar las reglas que puedes usar en la wiki de los creadores: All Rules – HTMLHint.

Probando HTMLHint

Para probar HTMLHint crearé un simple html llamado index.html con un Hola Mundo.

Y en el set de reglas (el archivo .htmlhintrc que creamos) tendremos lo siguiente:

Al correrlo de manera local nos mostrará lo siguiente:

Lo cual quiere decir que nuestro html sigue correctamente nuestro set de reglas.

Sin embargo, si modificamos un poco nuestro index…

Le hemos quitado el doctype al inicio, al igual que el title, lo cual esta establecido en nuestras reglas (doctype-first, title-require). Al correr nuevamente HTMLHint:

Nos muestra que contamos con dos errores:

  • No tenemos declarado Doctype al inicio.
  • Y tampoco tenemos ningun <title> en <head>

De esta manera podemos ir añadiendo reglas a nuestros htmls para tener un código más organizado.

Aquí podrás encontrar el repositorio de los creadores de HTMLHint:

https://github.com/htmlhint/HTMLHint

Recuerda: Un código ordenado es un código feliz.

Compartir
Estudiante de Ingeniería en Computación, amante de la música y las artes plásticas por el día, programadora por la noche.

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.