Softonic

Formateador de JavaScript

Paso 1 / 3
Siguiente

Pega un bloque de JavaScript minificado o mal indentado y obtén un código limpio y legible formateado con las mismas reglas que utilizan los editores. Elige tabulaciones o espacios, comillas simples o dobles, punto y coma o no, comas finales en ES5 o en todas partes. Maneja sintaxis moderna, encadenamiento opcional, coalescencia nula, JSX, TypeScript, await de nivel superior.

Cómo formatear JavaScript

  1. 1

    Pega la fuente

    Cualquier JS, JSX o TypeScript válido. El analizador elige el dialecto según la sintaxis.

  2. 2

    Configura tus preferencias

    Tamaño de indentación, tabulaciones vs espacios, estilo de comillas, punto y coma, ancho de impresión, comas finales.

  3. 3

    Formatear

    La herramienta ejecuta un pase compatible con Prettier y devuelve el resultado formateado.

  4. 4

    Copia la salida

    Copia con un clic o descarga como un archivo. La indentación original se descarta, no se superpone.

Opciones de estilo

Opción Valores Predeterminado
Indentación tab, 2, 4 2 espacios
Estilo de comillas simple, doble doble
Punto y coma siempre, nunca siempre
Ancho de impresión 60 - 120 80
Comas finales ninguna, es5, todas es5
Paréntesis de flecha siempre, evitar siempre
Espaciado de corchetes true, false true
Comillas simples en JSX true, false false

Por qué importa el formateo

El formateo no es cosmético, se trata de reducir la carga cognitiva. Un código formateado de manera consistente permite a los revisores centrarse en el cambio lógico, no en buscar un corchete mal colocado.

  • La discusión sobre detalles termina una vez que un proyecto adopta un formateador. git diff muestra el cambio real, no debates sobre indentación.
  • Ganchos pre-commit (con herramientas como Husky + lint-staged) auto-formatean archivos en espera antes de ser confirmados.
  • Integración en el editor (VS Code, WebStorm) aplica las mismas reglas al guardar.

Lo que el formateo no hace

  • No hace linting. Las reglas de estilo (no-unused-vars, eqeqeq) son territorio de ESLint. Un formateador solo reconfigura espacios en blanco y puntuación, no rechaza código por problemas lógicos.
  • No corrige errores de sintaxis. Si la entrada es un JS inválido, el formateador lanzará un error. Úsalo como una verificación de cordura para asegurarte de que tu código al menos se analiza.
  • No impone convenciones de nomenclatura. camelCase vs snake_case es una regla de lint, no de formateo.

Errores comunes

  • Luchar contra el formateador. Si sigues reformateando después de que se ejecutó, estás perdiendo tiempo. Configura las opciones o acepta la elección del proyecto.
  • Ejecutar formato en un archivo generado. Salida de empaquetador, código transpilado, .min.js, ninguno de ellos se beneficia. Formatea fuentes, no artefactos.
  • Formatear sin analizar. Un “pretty-print” de regex corromperá literales de plantilla, literales de regex y JSX. Siempre usa un formateador basado en AST (como este).

Preguntas frecuentes

Sí. El analizador detecta la sintaxis de TypeScript (tipos, interfaces, genéricos, decoradores) y formatea en consecuencia. JSX también es compatible dentro de archivos .tsx / .jsx.

Sigue las mismas reglas que los valores predeterminados de Prettier, configurables a través de las opciones habituales (ancho de impresión, comillas, punto y coma, comas finales). Un archivo formateado aquí debería coincidir con uno formateado por Prettier con la misma configuración.

El formateador requiere JavaScript válido y analizable. Si obtienes un error, es probable que el código tenga un problema de sintaxis (corchete no cerrado, JSX inválido, error tipográfico). Pásalo primero por un linter si el mensaje no es claro.

Sí. Tanto los comentarios de una línea (//) como los de bloque (/* */) se conservan en la salida, posicionados cerca de donde estaban en la fuente.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Generador de EditorConfig

Genera un archivo .editorconfig con tu estilo y tamaño de indentación, fin de línea, charset y reglas de espacios para un formato consistente en IDEs y editores.

Herramienta disponible en otros idiomas