Formatear JavaScript

Guía de uso

Con esta herramienta puedes formatear JavaScript minificado o escrito sin orden y obtener un código legible, con una instrucción por línea y dos espacios por nivel. Las llaves se abren en la misma línea, los operadores reciben espacios coherentes y las propiedades de los objetos se listan una por línea. Las cadenas, las plantillas literales y las expresiones regulares no cambian, y todo ocurre en tu navegador.

Cómo formatear JavaScript

1. Pega el código: un archivo minificado, un script incrustado o una sola función.
2. Aplica el formato con el botón de ejecutar o con el atajo Ctrl + Enter.
3. Sigue en la salida sangrada las funciones, las condiciones y los bucles.
4. Copia el resultado o descárgalo para abrirlo en tu editor.

Las reglas de estilo que aplica

• Llaves en la misma línea: if (d > 0) {, con el contenido un nivel más adentro y } else { en la línea del cierre.
• Espacios alrededor de operadores: p-p*d/100 pasa a p - p * d / 100.
• Objetos desplegados: cada propiedad de {api:"/v1",retry:3} va en su propia línea; los arrays y los argumentos se quedan en una.
• Cabeceras de bucle intactas: for (let i = 0; i < n; i++) no se parte.
• Ternarios legibles: x?"sí":"no" pasa a x ? "sí" : "no".
• Bloques switch: cada case va en su línea, pero las instrucciones de debajo no reciben sangría adicional.

Ejemplo: una función de descuentos

Partimos de function precioFinal(p,d){if(d>0){return p-p*d/100}else{return p}}. El resultado tiene siete líneas: la firma function precioFinal(p, d) {, la condición if (d > 0) {, el cálculo return p - p * d / 100, el } else {, el return p y los dos cierres. La lógica se lee de un vistazo.

Lo que no aparece son nombres más claros: p y d siguen siendo p y d. Si un minificador sustituyó los nombres originales por letras, esa información ya no está en el archivo y ningún formateador puede recuperarla. Para eso necesitas el mapa de código fuente del proyecto o el repositorio original.

Lo que nunca toca

• El contenido de cadenas y plantillas: los espacios de `Total: ${a+b} €` y la expresión interior se mantienen.
• Las expresiones regulares: distingue una división del inicio de una regex, así que /\s+/g no se rompe.
• Los saltos de línea de los que depende la inserción automática de punto y coma. No añade los punto y coma que falten.
• Los comentarios, aunque uno situado tras un punto y coma puede pasar a su propia línea.

Tampoco valida la sintaxis ni corta las líneas largas. Las cadenas de métodos como fetch(u).then(...).then(...) se quedan en una línea; solo se despliegan los cuerpos de función con llaves.

Para qué se usa en el día a día

• Revisar scripts de terceros antes de instalarlos: un chat, una etiqueta de analítica o un widget. Formateado, es fácil ver a qué direcciones envía datos.
• Depurar errores en producción: busca en el archivo formateado el nombre de función que aparece en la traza y lee el contexto. Los números de línea y columna de la traza siguen refiriéndose al archivo minificado.
• Revisar cambios: formatea dos versiones con las mismas reglas y compáralas con comparar textos.
• Aprender cómo está construido un ejemplo comprimido.

Si lo que tienes es JSON y no JavaScript, usa el formateador JSON: además de indentar, valida la sintaxis y señala la posición de cada error.

Privacidad y herramientas relacionadas

El formateo se hace con JavaScript en tu pestaña; el código no se ejecuta ni se envía al servidor, y la página solo suma un contador de uso anónimo. Para volver a reducirlo antes de publicarlo tienes minificar JavaScript, y para páginas completas con scripts, formatear HTML.