Formatear código suena a cosmética, pero es la forma más rápida de entender código ajeno: un archivo minificado de una sola línea con 40.000 caracteres se convierte, tras formatearlo, en 1.200 líneas legibles con estructura visible. Y para el código propio: quien deja el formato en manos de una herramienta no vuelve a discutir por tabuladores, espacios ni estilo de llaves.
Formatear código ajeno en 20 segundos
- Pega el archivo o fragmento en el formateador HTML/CSS/JS; el lenguaje se detecta solo.
- Elige la sangría: 2 espacios es el estándar en JavaScript y CSS; 4 en muchos proyectos PHP y HTML.
- Formatea y copia al editor. Ahora se ven el anidamiento, los límites de las funciones y el punto que querías depurar.
El formateador solo cambia espacios y saltos de línea; la lógica, las cadenas y los comentarios quedan idénticos. Por eso es inofensivo también con archivos de producción minificados: para leer, no para volver a subir.
Las convenciones que se han impuesto
| Lenguaje | Sangría | Otras reglas |
|---|---|---|
| JavaScript | 2 espacios | Puntos y coma, comillas simples, coma final en objetos, máx. 80–100 caracteres por línea |
| CSS | 2 espacios | Una declaración por línea, línea en blanco entre reglas, minúsculas |
| HTML | 2 o 4 | Un atributo por línea si hay más de tres; no partir elementos en línea |
| PHP | 4 espacios (PSR-12) | Llave de apertura de funciones en línea nueva, clases en archivo propio |
Mantener tu código consistente automáticamente
- Prettier para JavaScript, CSS y HTML: un comando, ninguna discusión. Un
.prettierrcen el proyecto y «formatear al guardar» en el editor. - EditorConfig: un archivo
.editorconfigfija sangría y finales de línea para cualquier editor del equipo. - Hook pre-commit: formatea antes de cada commit, así las revisiones muestran solo lógica, nunca espacios.
Lo que el formato no resuelve
Los malos nombres, las funciones de 300 líneas y la falta de comentarios siguen siendo malos, solo que bien sangrados. Formatear es el primer paso para leer código ajeno, no el último. El segundo es renombrar las funciones que ya has entendido.
Preguntas frecuentes
¿Tabuladores o espacios?
Los espacios son hoy el estándar en casi todas las guías de estilo; lo importante es que todo el proyecto use lo mismo.
¿Formatear puede romper el código?
No, mientras el código sea válido. Con errores de sintaxis el formateador se detiene y señala el punto, lo cual es útil.
¿Cómo formateo JSON?
Con el formateador de JSON, que además valida y ofrece vista de árbol.
Gratis, funciona en tu navegador, no se sube nada, sin registro.
Sigue leyendo
Más de Herramientas para desarrolladores.
