Code Formatter (Prettier) — Formateador de código

Qué hace este formateador de código

Esta herramienta ejecuta Prettier, el formateador de código con criterio propio que usa buena parte del ecosistema JavaScript, directamente en tu navegador. Prettier no se limita a volver a sangrar las líneas: analiza tu código fuente para convertirlo en un árbol sintáctico y lo vuelve a imprimir desde cero siguiendo un pequeño conjunto de reglas. Por eso el resultado es coherente por muy desordenada que fuera la entrada: las listas largas de argumentos se ajustan, los objetos se dividen en varias líneas solo cuando superan el ancho de impresión, las comillas y los puntos y coma siguen una única convención y los espacios sobrantes al final de línea desaparecen.

Puedes formatear JavaScript, JSX, TypeScript y TSX, los tres dialectos principales de hojas de estilo (CSS, SCSS y Less), HTML con estilos y scripts incrustados, JSON, esquemas y consultas GraphQL, documentos Markdown y archivos de configuración YAML. Cada lenguaje usa su propio plugin de Prettier y solo se carga el que necesitas, de modo que la página sigue siendo ligera hasta que realmente formateas algo.

Las opciones, explicadas

Print width (ancho de impresión) es la longitud de línea que Prettier intenta no superar; 80 es el valor predeterminado y 100 o 120 son habituales en equipos con monitores anchos. Tab width define cuántos espacios ocupa un nivel de sangría e Indent with alterna entre espacios y tabulaciones reales. Semicolons controla si las sentencias de JavaScript y TypeScript terminan en punto y coma; si está desactivado, Prettier solo lo añade donde es necesario para evitar ambigüedades. Single quotes prefiere ' en lugar de " para las cadenas cuando eso no obliga a escapar caracteres. Estas opciones se corresponden una a una con los ajustes de un archivo .prettierrc, así que puedes replicar la configuración de tu proyecto.

Privado y práctico

Todo ocurre en local: el formateador nunca sube tu código, no lo almacena ni lo envía a ninguna API. Por eso es seguro para código propietario, archivos de configuración con nombres de host internos o fragmentos copiados durante una incidencia en producción. Cuando el analizador encuentra un error de sintaxis, el mensaje indica la línea y la columna y el cursor salta a ese punto de la entrada, lo que lo convierte en una forma rápida de localizar un corchete que falta en un JSON o YAML grande. En el día a día, mantén Prettier en tu editor y en la CI; usa esta página cuando estés en un equipo sin tus herramientas, revises un fragmento recibido por chat o quieras limpiar código antes de pegarlo en la documentación.