Formateador de JS / TS
Embellece o minifica JavaScript, TypeScript y JSX/TSX con opciones de Prettier.
Tu código se formatea localmente en tu navegador con Prettier y Terser, y nada se sube a un servidor.
¿También necesitas formatear estilos? Prueba el Formateador CSS.
Acerca de Formateador de JS / TS
Este formateador js embellece o minifica JavaScript, TypeScript y JSX/TSX directamente en tu navegador. Como embellecedor de JavaScript ejecuta Prettier con un panel completo de opciones, mientras que la minificación usa Terser para reducir el código para producción. Elige el analizador Auto para detectar la sintaxis automáticamente, o fuerza JS/JSX o TS/TSX cuando necesitas un formateador typescript específico. Ajusta los punto y coma, el estilo de comillas, el ancho de tabulación, el ancho de impresión y las comas finales para que coincidan con el estilo de tu proyecto. Está pensado para desarrolladores que limpian fragmentos desordenados, ingenieros de QA que inspeccionan código empaquetado y cualquiera que quiera una alternativa rápida a prettier online. Todo se procesa localmente en tu navegador, así tu código fuente nunca sale de tu dispositivo y nada se sube a un servidor.
Características
- Embellece JavaScript, TypeScript y JSX/TSX con Prettier
- Minifica con Terser para reducir el código para producción
- Detección automática del analizador, más modos explícitos JS/JSX y TS/TSX
- Alterna punto y coma, comillas simples o dobles, y tabulaciones o espacios
- Ancho de tabulación configurable (2 o 4) y ancho de impresión (80, 100, 120)
- Elige comas finales: ninguna, es5 o todas
- Formateo instantáneo a medida que ajustas cualquier opción
- Se ejecuta por completo en tu navegador
Cómo usar Formateador de JS / TS
- Pega tu JavaScript o TypeScript en el cuadro de entrada.
- Elige Embellecer para formatear o Minificar para comprimir.
- Elige el analizador: Auto, JS / JSX o TS / TSX.
- Ajusta opciones como ancho de tabulación, comillas, punto y coma y comas finales.
- Copia la salida formateada desde el panel de resultados.
Ejemplo
Entrada
const greet=(name)=>{return 'hi '+name}
Salida
const greet = (name) => {
return 'hi ' + name;
};
Embellecido con las opciones predeterminadas de Prettier (sangría de 2 espacios, punto y coma).
Errores comunes y solución de problemas
- La salida está vacía o muestra un error de análisis tras pegar. — Asegúrate de que el fragmento sea JavaScript o TypeScript válido. Cambia el analizador a TS / TSX para anotaciones de tipos, o JS / JSX para sintaxis de React.
- El modo Auto analiza mal sintaxis específica de TypeScript. — Auto prueba primero el analizador de TypeScript y recurre a Babel; fuerza TS / TSX explícitamente si tu archivo usa funciones de tipos avanzadas.
- La salida minificada se ve ilegible. — Eso es lo esperado. Terser quita los espacios y acorta el código para producción. Usa Embellecer si quieres un resultado legible.
- Las comillas o los punto y coma no son los que querías. — Alterna las opciones de comillas simples y punto y coma antes de copiar. Prettier reformatea al instante cuando las cambias.
Preguntas frecuentes
- ¿Qué es el formateador JS y qué puede hacer?
- Es una herramienta que funciona en el navegador y embellece o minifica JavaScript, TypeScript y JSX/TSX. El embellecido ejecuta Prettier con opciones de estilo completas y la minificación ejecuta Terser para comprimir el código para producción.
- ¿Cómo formateo TypeScript o JSX con el formateador JS?
- Elige el analizador: JS / JSX, TS / TSX o Auto. Auto prueba primero el analizador de TypeScript y recurre a Babel, así JavaScript puro, JSX y TypeScript se formatean todos correctamente.
- ¿El formateador JS usa Prettier y Terser?
- Sí. El embellecido usa Prettier y la minificación usa Terser, así la salida coincide con las mismas herramientas que usarías en un pipeline de compilación real.
- ¿Qué opciones de estilo puedo controlar en el formateador JS?
- Puedes alternar comillas simples o dobles y punto y coma, cambiar entre tabulaciones y espacios, fijar el ancho de tabulación en 2 o 4, elegir un ancho de impresión de 80, 100 o 120, y elegir comas finales de ninguna, es5 o todas.
- ¿El formateador JS envía mi código a algún lugar?
- No. Prettier y Terser se ejecutan por completo en tu navegador, así tu código nunca sale de tu dispositivo y nada se sube a un servidor.
Herramientas relacionadas
- Formateador de CSS / SCSS — Embellece o minifica CSS/SCSS/LESS, ordena propiedades y quita duplicados.
- Formateador de HTML — Embellece o minifica HTML, formatea CSS/JS en línea y previsualiza el resultado.
- Formateador de JSON — Embellece, minimiza y valida JSON con la ubicación de los errores.
- JSON a TypeScript — Genera interfaces de TypeScript a partir de una muestra JSON.
- Formateador de SQL — Formatea SQL para MySQL, PostgreSQL, SQL Server, SQLite, BigQuery y Oracle.
- Formateador de GraphQL — Formatea o minifica consultas y esquemas GraphQL, valida la sintaxis y extrae operaciones.
- Formateador de XML — Embellece, minifica y valida XML, y convierte XML ↔ JSON.
- cURL a Fetch — Convierte un comando curl en una llamada fetch() de JavaScript.
Todas las herramientas de ArrayKit