¿Para qué sirve formatear JavaScript?
Formatear JavaScript aplica un estilo consistente al código: sangría, saltos de línea, espacios, comillas y punto y coma. Sirve tanto para leer código minificado como para dejar ordenado un fragmento escrito deprisa o copiado de distintos sitios con estilos mezclados, por ejemplo de Stack Overflow, de la documentación de una librería o de varios compañeros.
Esta herramienta usa Prettier con el analizador de Babel, así que entiende JavaScript moderno, JSX de React y también JSON. Puedes elegir sangría (2 espacios, 4 espacios o tabuladores), ancho de línea (80, 100 o 120), si quieres punto y coma al final de cada sentencia, comillas simples o dobles y comas finales en objetos, arrays y argumentos. Así el resultado encaja con las reglas de tu proyecto y con el estilo que use tu equipo, sin tener que instalar ni configurar nada.
Un uso muy habitual es desminificar: pegar un script comprimido para volver a ver su estructura. Prettier vuelve a sangrar y separar el código, pero no puede recuperar los nombres originales de variables que un minificador acortó con mangle; verás nombres como a, b o n. Si el código tiene un error de sintaxis, se muestra el mensaje del analizador con la línea y columna. Para un JSON, el formateo es además una forma rápida de comprobar que es válido.
El código se procesa en tu navegador y nunca se sube a un servidor. Tienes una prueba gratis con un archivo o un texto pegado; con ToolStudio Pro el uso es ilimitado y puedes formatear varios archivos a la vez y descargarlos en un ZIP.
¿Cómo formatear JavaScript?
- Pega tu código JavaScript, JSX o JSON, o arrastra un archivo.
- Elige la sangría y el ancho de línea.
- Ajusta el estilo: punto y coma, comillas simples o dobles y comas finales.
- Pulsa el botón para formatear.
- Copia el resultado o descárgalo.
Usos habituales
- Leer un script minificado para entender qué hace.
- Ordenar un JSON de una API que llega en una sola línea.
- Formatear componentes JSX copiados de ejemplos o documentación.
- Unificar el estilo de un fragmento antes de pegarlo en tu proyecto.
- Preparar ejemplos de código limpios para un artículo o una clase.
- Revisar código sin tener un editor configurado a mano.
Comas finales y punto y coma
Las comas finales (trailing commas) son la coma tras el último elemento de un objeto o array, por ejemplo { a: 1, b: 2, }. Hacen que añadir una línea nueva solo cambie una línea en el diff de Git. El punto y coma es opcional en JavaScript gracias a la inserción automática, pero muchos equipos prefieren escribirlo siempre. Prettier aplica la opción que elijas de forma segura, añadiendo un punto y coma defensivo donde hace falta.
Preguntas Frecuentes
¿Admite JSX y JSON?
Sí. El analizador de Babel entiende JavaScript moderno, JSX y JSON.
¿Recupera el código original de un archivo minificado?
Recupera la estructura y la legibilidad, pero no los nombres de variables que el minificador acortó. Eso no se puede deshacer.
¿Admite TypeScript?
Este formateador está pensado para JavaScript, JSX y JSON; la sintaxis propia de TypeScript, como los tipos, puede dar error.
¿Mi código se sube a algún servidor?
No. Prettier se ejecuta en tu navegador.
¿Es gratis?
Tienes una prueba gratis por herramienta: un archivo o un texto pegado. Después puedes volver a procesar ese mismo texto con otras opciones tantas veces como quieras, pero para procesar código nuevo necesitas ToolStudio Pro, que te da uso ilimitado de todas las herramientas, varios archivos a la vez descargados juntos en un ZIP y ninguna publicidad. Puedes cancelarlo cuando quieras.