📋
← Volver a guías

Impresión bonita de JSON: cómo formatear JSON para que sea legible

· Etiquetas: json, pretty-print, json-formatter, json-indentation, developer-tools

¿Qué es la impresión bonita de JSON?

La impresión bonita de JSON es el proceso de tomar datos JSON sin procesar, compactos (minificados) y reformatearlos con sangría, saltos de línea y espaciado adecuados para hacerlos legibles para los humanos. Un documento JSON impreso de forma bonita usa sangría consistente y un formato estructural claro que revela la jerarquía de objetos y arrays anidados.

Compara estas dos representaciones de los mismos datos:

Minificado (difícil de leer):

{"users":[{"id":1,"name":"Alice","roles":["admin","editor"]},{"id":2,"name":"Bob","roles":["viewer"]}],"total":2}

Impreso de forma bonita (fácil de leer):

{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "roles": ["admin", "editor"]
    },
    {
      "id": 2,
      "name": "Bob",
      "roles": ["viewer"]
    }
  ],
  "total": 2
}

Impresión bonita vs JSON minificado

La elección entre JSON impreso de forma bonita y minificado depende del caso de uso:

| Aspecto | Impresión bonita | Minificado | |--------|-------------|----------| | Legibilidad | Alta -- estructura clara | Baja -- todos los datos en una línea | | Tamaño del archivo | Mayor (más espacio en blanco) | Menor (sin sobrecarga de espacio en blanco) | | Transferencia de red | Más lenta para cargas útiles grandes | Más rápida, menos ancho de banda | | Depuración | Ideal para desarrollo | Poco práctica para inspección | | Uso en producción | Raramente usado | Estándar para respuestas de API |

Las APIs de producción normalmente sirven JSON minificado para reducir el ancho de banda, mientras que los desarrolladores imprimen JSON de forma bonita durante el desarrollo y la depuración.

Estilos de sangría

La mayoría de los formateadores admiten dos estilos comunes de sangría:

Sangría de 2 espacios (la más común)

{
  "name": "Alice",
  "age": 30,
  "address": {
    "city": "New York"
  }
}

Recomendado para: proyectos JavaScript/TypeScript, desarrollo web moderno y la mayoría de los usos generales.

Sangría de 4 espacios

{
    "name": "Alice",
    "age": 30,
    "address": {
        "city": "New York"
    }
}

Recomendado para: proyectos Python (estilo PEP 8) y equipos que prefieren una sangría más amplia para mayor claridad.

Sangría con tabulaciones

Algunos desarrolladores prefieren la sangría basada en tabulaciones, particularmente en flujos de trabajo centrados en la accesibilidad donde los usuarios ajustan el ancho de la tabulación en su editor.

Cómo elegir la sangría adecuada

La mayoría de los equipos estandarizan en 2 espacios porque equilibra la legibilidad con la eficiencia del espacio horizontal. El ecosistema de JavaScript (Node.js, React, Vue) usa abrumadoramente la sangría de 2 espacios. Si trabajas en un entorno orientado a Python, la sangría de 4 espacios puede sentirse más natural. La clave es la consistencia -- elige un estilo y aplícalo en todo tu proyecto con una herramienta como Prettier o EditorConfig.

Impresión bonita de JSON en diferentes lenguajes de programación

JavaScript / Node.js

const formatted = JSON.stringify(data, null, 2);
console.log(formatted);

Python

import json
formatted = json.dumps(data, indent=2)
print(formatted)

Java

import com.fasterxml.jackson.databind.ObjectMapper;
ObjectMapper mapper = new ObjectMapper();
String formatted = mapper.writerWithDefaultPrettyPrinter()
    .writeValueAsString(data);

Go

import "encoding/json"
formatted, _ := json.MarshalIndent(data, "", "  ")
fmt.Println(string(formatted))

Ruby

require 'json'
puts JSON.pretty_generate(data)

Cómo imprimir JSON de forma bonita

Usar un formateador JSON en línea

El método más rápido es usar un formateador JSON gratuito en línea -- pega tu JSON y obtén una salida formateada al instante con resaltado de sintaxis y detección de errores.

Usar herramientas de línea de comandos

Con jq (el más popular):

cat file.json | jq .

Con Python:

python -m json.tool file.json

Con Node.js:

node -e "const d = require('./file.json'); console.log(JSON.stringify(d, null, 2));"

Herramientas de desarrollo del navegador

Todos los navegadores importantes formatean las respuestas JSON automáticamente en sus pestañas de Red:

  • Chrome DevTools: la pestaña Network imprime automáticamente de forma bonita las respuestas JSON
  • Firefox Developer Tools: las respuestas JSON se muestran con vistas de árbol plegables
  • Safari Web Inspector: la vista previa de JSON incluye formato automático

Plugins de IDE para el formateo de JSON

VS Code

VS Code tiene un excelente soporte JSON integrado. Usa Shift+Alt+F (Windows/Linux) o Shift+Option+F (macOS) para formatear cualquier archivo JSON. Extensiones adicionales mejoran la experiencia:

  • Prettier -- Formatea JSON, JSONC y muchos otros lenguajes de forma consistente
  • JSON Tools -- Ordena, minifica y formatea JSON con atajos de teclado
  • JavaScript Booster -- Funciones avanzadas de manipulación de JSON

IDEs de JetBrains (IntelliJ, WebStorm, PyCharm)

  • Formateador integrado: Ctrl+Alt+L (Windows/Linux) o Cmd+Option+L (macOS)
  • Validación y formateo automáticos de JSON al pegar

Vim / Neovim

" Format JSON in place
:%!jq .

Opciones avanzadas de formateo de JSON

Los formateadores JSON modernos ofrecen más que la sangría básica:

  • Ordenación de claves -- Ordena alfabéticamente las claves de los objetos para una salida consistente
  • Resaltado de sintaxis -- Claves, cadenas, números y booleanos con códigos de color
  • Árboles plegables -- Expande y colapsa estructuras anidadas para una navegación más fácil
  • Números de línea -- Referencia ubicaciones específicas durante la depuración
  • Resaltado de errores -- Marca visualmente los errores de sintaxis con mensajes detallados

Mejores prácticas para la legibilidad de JSON

  1. Valida siempre antes de formatear -- Un formateador no puede corregir JSON no válido. Usa un validador JSON primero para detectar errores de sintaxis.
  2. Establece un estándar de equipo -- Acuerda la sangría (2 espacios es el estándar de la industria) y aplícala con Prettier o un linter.
  3. Mantén el anidamiento poco profundo -- El JSON profundamente anidado (4+ niveles) es difícil de leer independientemente del formato. Considera reestructurarlo cuando sea posible.
  4. Usa claves significativas -- Los nombres de clave descriptivos y concisos mejoran la legibilidad más que cualquier formateador.
  5. Añade nuevas líneas al final -- Termina los archivos JSON con un carácter de nueva línea para cumplir con los estándares POSIX y evitar ruido en los diffs.

Prueba nuestra herramienta gratuita de impresión bonita de JSON en línea para formatear y embellecer tus datos JSON al instante con sangría personalizable y resaltado de sintaxis.