Usa el Embellecedor de JavaScript gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Que significa embellecer
Embellecer, tambien llamado formatear, toma JavaScript dificil de leer y lo reescribe con indentacion uniforme, saltos de linea y espacios, sin cambiar lo que hace. El codigo minificado en una linea vuelve a ser un listado estructurado. El codigo pegado desde un mensaje de chat o un PDF, donde se perdieron los saltos de linea, vuelve a ser legible. La logica queda identica; solo cambia la presentacion. La herramienta de arriba formatea con js-beautify, un formateador de codigo abierto con larga historia, por completo en tu navegador.
Formatear importa porque el codigo se lee mucho mas a menudo de lo que se escribe. Un programador que hereda un archivo desordenado pasa la mayor parte del tiempo solo averiguando donde empiezan y terminan los bloques. Un formato uniforme quita esa friccion, asi que las revisiones se centran en la logica en vez del diseno, y los errores escondidos en un muro de texto se vuelven visibles.
Como usar la herramienta
Pega JavaScript en la casilla de entrada, elige un tamano de indentacion y pulsa Embellecer. Dos espacios es la opcion mas comun en proyectos modernos, cuatro espacios es tradicional, y ocho es raro pero a veces lo exige un estilo interno. El codigo formateado aparece abajo, junto con el conteo de lineas antes y despues, que da una idea rapida de lo enredada que estaba la entrada.
Usa el boton Cargar ejemplo para ver una transformacion tipica, luego sustituye el texto con tu propio codigo. Copia el resultado o descargalo como archivo. Si la entrada tiene un problema de sintaxis, el formateador hace lo que puede, pero un formateador no es un corrector: el codigo roto puede formatearse de forma rara, y el arreglo real es corregir primero la sintaxis, luego formatear.
Que cambia el formato
Un formateador ajusta los espacios: indentacion por nivel de anidacion, saltos de linea despues de llaves y punto y coma, espacios alrededor de operadores, y lineas en blanco entre bloques principales. No cambia nombres de variables, no reordena instrucciones, ni cambia la logica. Dos programas que solo difieren en formato son el mismo programa, y un buen formateador lo prueba produciendo el mismo resultado para ambos.
Tampoco impone gustos mas alla del diseno. No dividira una expresion larga en la forma que prefieras, no cambiara el nombre de una variable confusa, ni simplificara una condicion enredada. Esas son decisiones de refactorizacion, y pertenecen a una persona o a una herramienta con mas opinion. Piensa en embellecer como ordenar un escritorio: todo se vuelve localizable, pero tu sigues decidiendo que guardar.
Cuando mas ayuda formatear
Las mayores ventajas vienen del codigo minificado que necesitas depurar, del codigo copiado de una pagina web donde el formato colapso, y del codigo escrito rapido bajo presion con un estilo irregular. Tambien ayuda cuando comparas dos versiones de un archivo: formatea primero las dos, y las diferencias reales destacan en vez de quedar enterradas en cambios de espacios.
En un equipo, acuerden un tamano de indentacion y un formateador, y ejecutenlo de forma automatica al guardar o antes de confirmar cambios. Los debates manuales sobre formato pierden tiempo y producen archivos irregulares. Un formateador automatico termina la discusion haciendo del estilo una no decision, que es justo lo que quieres para algo que nunca debio debatirse.
Formatear no es arreglar
Un archivo formateado puede seguir estando mal. Formatear no detectara un error de logica, una condicion que falta, o una variable usada antes de definirse. Puede hacer esos errores mas faciles de ver, porque la estructura se vuelve obvia, pero no puede juzgar si es correcto. Despues de formatear, lee el codigo, ejecuta sus pruebas y revisa el comportamiento, sobre todo en las partes que parecian mas enredadas antes.
Ten cuidado con el codigo que depende de espacios exactos, como literales de plantilla que contienen texto que debe mantener su forma. Un formateador respeta el contenido de las cadenas, asi que el texto entre comillas esta seguro, pero si ves cambios inesperados dentro de una cadena, revisa si la cadena era en realidad una plantilla con expresiones antes de culpar a la herramienta.
Elegir un estilo
No hay un tamano de indentacion universalmente correcto. Dos espacios es compacto y popular en proyectos web, cuatro espacios es mas facil de revisar en codigo muy anidado, y las tabulaciones las prefieren algunos equipos porque cada lector puede fijar su propio ancho. Lo que importa es la uniformidad dentro de un proyecto. Elige uno, configura tu editor, y deja que el formateador lo aplique, para que cada archivo parezca escrito por la misma mano cuidadosa.
Por ultimo, no pierdas de vista cual es el original y cual el formateado. Formatea el archivo que quieres conservar, y no mantengas dos copias, una desordenada y una ordenada, porque se alejaran y olvidaras cual es la real. Formatea en su lugar, confirma el cambio, y sigue adelante.
Pingback: JavaScript Beautifier - Format Messy JS Code Readably Free