Cómo ordenar HTML automáticamente en Sublime Text con Prettier

Cuando trabajamos con archivos HTML, es habitual encontrarnos con código desordenado, etiquetas sin una indentación adecuada o estructuras completas escritas en una sola línea. Esto dificulta la lectura, el mantenimiento y la localización de posibles errores.

Afortunadamente, es posible formatear HTML en Sublime Text automáticamente utilizando herramientas como Prettier y el complemento JsPrettier. Gracias a esta combinación, podemos organizar nuestro código HTML en cuestión de segundos, sin necesidad de modificar manualmente cada etiqueta.

En este artículo explicaremos cómo instalar y configurar Prettier en Sublime Text sobre Windows, cómo utilizarlo para ordenar archivos HTML y cómo solucionar algunos errores habituales relacionados con Node.js, npm y las políticas de seguridad de PowerShell.

¿Qué es Prettier y para qué sirve?

Prettier es un formateador de código que permite aplicar automáticamente un estilo consistente a diferentes lenguajes de programación y marcado, entre ellos HTML, CSS, JavaScript y JSON. Su principal función es analizar la estructura del código y reorganizar su presentación siguiendo unas reglas de formato.

Entre sus principales características destacan:

• Aplicar automáticamente una indentación uniforme.
• Organizar los saltos de línea.
• Mejorar la legibilidad de las etiquetas HTML.
• Mantener un estilo consistente en todos los archivos.
• Reducir el tiempo dedicado al formato manual del código.
• Facilitar el mantenimiento de proyectos web.

Es importante destacar que Prettier no reorganiza libremente los elementos HTML ni modifica su orden lógico. Su función consiste en mejorar el formato del código respetando, en la medida de lo posible, su estructura y comportamiento.

Cómo instalar JsPrettier en Sublime Text

Para poder formatear HTML en Sublime Text, utilizaremos el complemento JsPrettier, que permite integrar Prettier directamente en el editor.

El primer paso consiste en abrir Sublime Text y acceder a la paleta de comandos mediante la combinación de teclas:

Ctrl + Shift + P

A continuación, buscamos la siguiente opción:

Package Control: Install Package

Una vez abierto el buscador de paquetes, escribimos:

JsPrettier

Seleccionamos el complemento y esperamos a que finalice su instalación.

Podemos encontrar más información sobre este complemento en su repositorio oficial de GitHub.

Aunque el complemento ya esté instalado, todavía necesitamos configurar las herramientas necesarias para que funcione correctamente.

Instalar Node.js en Windows para utilizar Prettier

Prettier necesita un entorno de ejecución de JavaScript. Para ello, instalaremos Node.js, que incluye npm, el gestor de paquetes que utilizaremos para instalar Prettier.

Accedemos a la página oficial de Node.js:

https://nodejs.org/es

Descargamos la versión LTS (Long Term Support), recomendada para entornos donde priorizamos la estabilidad.

Durante la instalación, podemos mantener las opciones predeterminadas y comprobar que Node.js se añade a la variable de entorno PATH de Windows.

Una vez finalizada la instalación, cerramos las ventanas de PowerShell que tengamos abiertas y ejecutamos una nueva.

Para comprobar que Node.js está instalado correctamente, introducimos:

node -v

Si funciona, mostrará la versión instalada. Por ejemplo:

v24.22.0

También podemos comprobar que npm está disponible mediante:

npm.cmd -v

Si ambos comandos devuelven sus respectivas versiones, podemos continuar con la instalación de Prettier.

Solucionar el error «node no se reconoce como un comando»

Uno de los problemas que podemos encontrar al intentar utilizar Node.js es el siguiente:

node : El término 'node' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable.

Este error suele indicar que Node.js no está instalado o que su directorio de instalación no se encuentra correctamente añadido a la variable PATH del sistema.

Para solucionarlo, debemos instalar Node.js desde su página oficial y abrir nuevamente PowerShell.

Si Node.js ya está instalado, será necesario revisar las variables de entorno de Windows para comprobar que la ruta de instalación se encuentra correctamente configurada.

Instalar Prettier mediante npm

Con Node.js funcionando, el siguiente paso consiste en instalar Prettier.

Abrimos Windows PowerShell e introducimos:

npm.cmd install -g prettier

Este comando instala Prettier de forma global, permitiendo utilizarlo desde la línea de comandos y desde aplicaciones que puedan localizar su ejecutable.

El parámetro -g indica que la instalación se realizará de forma global, en lugar de limitarse a un proyecto específico.

Cuando finalice, comprobamos la versión instalada:

prettier.cmd -v

Si aparece un número de versión, significa que Prettier está instalado y disponible.

Solucionar el error de ejecución de scripts de PowerShell

En algunos equipos con Windows, al intentar ejecutar npm puede aparecer un mensaje similar al siguiente:

npm : No se puede cargar el archivo
C:\Program Files\nodejs\npm.ps1 porque
la ejecución de scripts está deshabilitada
en este sistema.

Este error está relacionado con la política de ejecución de scripts de PowerShell.

Cuando escribimos npm, PowerShell puede intentar ejecutar el archivo npm.ps1. Si las políticas del sistema impiden ejecutar scripts, la operación será bloqueada.

La solución más sencilla es utilizar npm.cmd en lugar de npm.

Por ejemplo, en lugar de ejecutar:

npm install -g prettier

Utilizamos:

npm.cmd install -g prettier

De esta forma, ejecutamos el archivo de comandos de Windows y evitamos el bloqueo del script de PowerShell. Esta solución resulta especialmente recomendable porque no requiere modificar las políticas de seguridad del sistema.

También podemos comprobar la versión de npm utilizando:

npm.cmd -v

Y la versión de Prettier con:

prettier.cmd -v

Cómo formatear HTML en Sublime Text automáticamente

Una vez que tenemos Node.js, Prettier y JsPrettier instalados, podemos comenzar a formatear nuestros archivos HTML.

Primero cerramos Sublime Text completamente y volvemos a abrirlo para que pueda reconocer correctamente los cambios realizados en el entorno de Windows.

Después, abrimos el archivo HTML que deseamos ordenar.

Debemos comprobar que Sublime Text reconoce el lenguaje del documento. Para ello, podemos acceder al menú:

View → Syntax → HTML

A continuación, abrimos la paleta de comandos:

Ctrl + Shift + P

Buscamos la opción:

JsPrettier: Format Code

Al ejecutar este comando, el complemento intentará utilizar Prettier para reorganizar automáticamente el formato del archivo.

Ejemplo de HTML antes y después de utilizar Prettier

Supongamos que tenemos el siguiente archivo HTML, donde todo el contenido está escrito en una única línea:

<html><head><title>Mi página</title></head><body><div class="contenedor"><h1>Bienvenidos</h1><p>Ejemplo de texto</p></div></body></html>

Aunque el código puede ser interpretado por un navegador, trabajar con esta estructura resulta incómodo, especialmente cuando el documento empieza a crecer.

Después de aplicar Prettier, el resultado puede ser similar al siguiente:

<html>
  <head>
    <title>Mi página</title>
  </head>
  <body>
    <div class="contenedor">
      <h1>Bienvenidos</h1>
      <p>Ejemplo de texto</p>
    </div>
  </body>
</html>

Ahora las etiquetas están organizadas jerárquicamente, con sus correspondientes sangrías y saltos de línea.

Esto facilita identificar qué elementos pertenecen a cada contenedor y localizar posibles errores en la estructura HTML.

Formatear HTML en Sublime Text automáticamente es una forma sencilla de mejorar la organización y el mantenimiento del código de nuestras páginas web.

Mediante la combinación de Sublime Text, JsPrettier, Node.js y Prettier podemos aplicar un formato consistente a nuestros documentos sin tener que modificar manualmente cada etiqueta.

Durante la instalación en Windows pueden aparecer problemas relacionados con las variables de entorno o las restricciones de ejecución de scripts de PowerShell. Sin embargo, muchos de estos errores pueden solucionarse verificando la instalación de Node.js y utilizando npm.cmd en lugar de npm.

Con estas herramientas correctamente configuradas, podremos trabajar con archivos HTML más legibles, ordenados y fáciles de mantener, optimizando nuestro flujo de trabajo en el desarrollo web.