Formateador de Código Gratuito: Embellecer JavaScript, Python, HTML y Más
Formatee instantáneamente código desordenado con sangría y espaciado adecuados. Admite más de 12 lenguajes, incluidos JavaScript, Python, HTML, CSS y Java. Basado en navegador, seguro y gratuito. No se requiere registro.
Formateador de Código
Formatee su código con un solo clic. Seleccione un lenguaje, pegue su código y obtenga un formato adecuado.
Cómo Usar:
- Seleccione su lenguaje de programación del menú desplegable.
- Pegue su código sin formatear en el área de entrada.
- Haga clic en el botón 'Formatear Código'.
- Copie el resultado formateado del área de salida.
Documentación
¿Qué es un formateador de código?
Un formateador de código es una herramienta que reescribe el código fuente con sangría, saltos de línea y espaciado uniformes, sin cambiar lo que hace el código. Este formateador de código se ejecuta en un navegador web. Es compatible con 12 lenguajes de programación, incluidos JavaScript, Python, HTML y CSS.
Cómo funciona este formateador de código
La herramienta utiliza un conjunto de reglas diferente para cada lenguaje. Ninguno de ellos construye un árbol de análisis sintáctico completo del código, excepto JSON.
- JSON se analiza con el analizador JSON integrado del navegador y luego se vuelve a imprimir con una sangría de dos espacios. Si el JSON no es válido, la herramienta informa de un error y no muestra ningún resultado.
- JavaScript, TypeScript, Java, C, C++ y C# comparten un mismo formateador. Este examina el código carácter por carácter y realiza un seguimiento de las llaves, los paréntesis y los puntos y coma. Cada
{inicia un nuevo bloque con sangría, y cada}o;termina una línea. Los comentarios y las cadenas entre comillas se copian sin modificaciones. Este formateador no añade espacios alrededor de los operadores ni después de las comas que no los tuvieran en el código original; solo reconstruye los saltos de línea y la sangría. - Python lee la sangría existente de cada línea y la reconstruye usando cuatro espacios por nivel, siguiendo las mismas reglas de anidamiento que utiliza el propio lenguaje Python. No divide las líneas largas, no añade líneas en blanco ni espacios alrededor de los operadores; solo normaliza el nivel de sangría de cada línea.
- CSS elimina los saltos de línea y los espacios en blanco adicionales, y luego añade un salto de línea después de cada
{y;, y antes de cada}. - HTML y XML añaden un salto de línea y dos espacios de sangría por cada nivel de etiquetas anidadas, y reconocen etiquetas estándar autocerradas, como
<br>,<img>y<input>. - SQL convierte a mayúsculas un conjunto fijo de palabras clave, como
SELECT,FROM,WHERE,JOINyORDER BY, y comienza una nueva línea antes de cada cláusula principal.
Como solo la ruta de JSON analiza realmente la entrada, ninguno de los demás formateadores detecta errores de sintaxis, como un corchete faltante o una cadena sin cerrar. Reformatean cualquier texto que reciban, aunque no pudiera ejecutarse.
Lenguajes compatibles
| Lenguaje | Extensión de archivo habitual | Ancho de sangría |
|---|---|---|
| JavaScript | .js | 2 espacios |
| TypeScript | .ts | 2 espacios |
| HTML | .html | 2 espacios |
| CSS | .css | 2 espacios |
| Python | .py | 4 espacios |
| Java | .java | 4 espacios |
| C | .c | 4 espacios |
| C++ | .cpp | 4 espacios |
| C# | .cs | 4 espacios |
| SQL | .sql | saltos de línea por cláusula |
| JSON | .json | 2 espacios |
| XML | .xml | 2 espacios |
Cómo formatear código
- Selecciona un lenguaje de programación en el menú desplegable.
- Pega el código sin formato en el cuadro de entrada.
- Selecciona «Formatear código».
- Copia el resultado formateado del cuadro de salida.
El formateo ocurre completamente dentro del navegador. El código nunca se envía a un servidor.
Ejemplo de formateo de JavaScript
Antes de formatear:
1function add(a, b) {
2 if (a > 0) { return a + b; }
3 return 0;
4}
5Después de formatear:
1function add(a, b) {
2 if (a > 0) {
3 return a + b;
4 }
5 return 0;
6}
7El formateador colocó el código dentro de { } en su propia línea con sangría y normalizó la sangría a dos espacios por nivel. Dejó exactamente como estaban los espacios alrededor de a > 0 y a + b, porque esos espacios ya estaban presentes.
Ejemplo de formateo de Python
Antes de formatear:
1def calculate_average(numbers):
2 if len(numbers) == 0:
3 return 0
4 total = sum(numbers)
5 return total / len(numbers)
6Después de formatear:
1def calculate_average(numbers):
2 if len(numbers) == 0:
3 return 0
4 total = sum(numbers)
5 return total / len(numbers)
6El código original utilizaba dos espacios por nivel de sangría. El formateador reconstruyó la sangría de cada línea usando cuatro espacios por nivel, de acuerdo con el estilo descrito en PEP 8, la guía de estilo oficial de Python. Mantuvo todas las líneas en el mismo orden y no modificó los espacios dentro de ellas.
Por qué es importante formatear el código
Una sangría incoherente dificulta ver dónde termina una función, un bucle o una condición. El código que han editado varias personas suele acabar con una mezcla de sangría mediante tabulaciones y espacios, o con líneas que no se alinean con el bloque al que pertenecen. Pasarlo por un formateador proporciona a todos los archivos la misma estructura visual, lo que permite revisarlos más rápido y detectar con mayor facilidad una llave mal colocada.
Limitaciones
- Tamaño de entrada: La herramienta acepta hasta 50.000 caracteres de código. Las entradas más largas se rechazan con un mensaje de error antes de que comience el formateo.
- Sin comprobación de sintaxis para la mayoría de los lenguajes: Solo se analiza y valida la entrada JSON. El código de los otros 11 lenguajes se reformatea tal cual, aunque tenga un corchete faltante o una cadena sin cerrar. En ese caso, el resultado puede presentar una sangría incorrecta en lugar de marcarse como error.
- Sin cambios en los espacios de los operadores: Los formateadores de JavaScript, TypeScript y los lenguajes de la familia C solo reorganizan los saltos de línea y la sangría. No insertan un espacio alrededor de
+,=,!==ni después de una coma si no lo había originalmente. - PHP no es compatible: Seleccionar un lenguaje no compatible devuelve el código sin cambios.
Preguntas frecuentes
¿Comprueba esta herramienta si mi código tiene errores de sintaxis? Solo en el caso de JSON. La entrada JSON se analiza, por lo que un JSON no válido produce un mensaje de error. El código de los demás lenguajes compatibles se reformatea sin comprobar si su sintaxis es válida.
¿Envía mi código a un servidor? No. El formateo se ejecuta completamente en el navegador mediante JavaScript. El código no se carga ni se almacena en ningún sitio.
¿Cuál es la cantidad máxima de código que puede formatear? 50.000 caracteres. Pegar una cantidad mayor produce un error antes de que comience el formateo.
¿Añadirá los espacios que faltan alrededor de mis operadores o después de las comas? No, en JavaScript, TypeScript, Java, C, C++ y C#. Esos formateadores solo reconstruyen la sangría y los saltos de línea alrededor de las llaves y los puntos y coma; el resto de cada línea se copia tal como está escrito.
¿Qué sangría utiliza? Dos espacios para JavaScript, TypeScript, HTML, CSS, JSON y XML. Cuatro espacios para Python, Java, C, C++ y C#.
¿Por qué mi código se ve casi igual después de formatearlo? Si la entrada ya utilizaba un espaciado uniforme y un mismo estilo de llaves, el formateador principalmente reconstruye la sangría, por lo que el cambio puede ser pequeño. Resulta más útil con código que tiene una sangría mezclada o que ha sido minimizado en muy pocas líneas.