Embellecer código en línea: JS, CSS, HTML y JSON legibles

Hacer legibles JS, CSS, HTML y JSON minificados. Beautify en línea vs Prettier/ESLint, hooks pre-commit, y cuándo «desminificar» es el verbo correcto.

27.04.2026

8 min de lectura

Compartir este artículo:

Embellecimiento

formatting

Código

JavaScript

CSS

HTML

JSON

Desarrollo

Tutorial

¿Por qué embellecer código?

Embellecer (o «formatear») código consiste en reindentar, espaciar y estructurar un archivo para que sea legible de inmediato. Es la operación inversa de la minificación: donde un minificador JavaScript en línea comprime tu script en una sola línea, un embellecedor lo redepliega en bloques aéreos e indentados. Cuando recuperas un bundle de producción, una exportación de terceros o un payload API compacto, el código suele ser ilegible — ahí es donde un desminificador JavaScript o un embellecedor CSS, HTML, JSON, XML o SVG se vuelve indispensable. FastMinify expone un botón «Embellecer» en cada una de sus herramientas: JS, CSS, JSON, HTML, XML y SVG. Esta guía cubre las herramientas en línea, la integración en el editor (Prettier, ESLint, EditorConfig), los hooks pre-commit y el reflejo adecuado para no perder más tiempo con código mal formateado.

Lectura inmediata de un bundle minificado de producción sin montar un entorno

Revisiones de código, auditorías de seguridad y debug más rápidos sobre código de terceros compactado

Coherencia de equipo garantizada vía Prettier, ESLint y EditorConfig

Workflow unificado: una sola herramienta en línea para embellecer JS, CSS, HTML, JSON, XML y SVG

Ciclo limpio: dev → embellecer, prod → minificar para entregar rápido y depurar fácil

Cuándo un embellecedor lo cambia todo

Depurar un bundle de producción

Rastreas un error en Sentry en la línea 1, columna 84327 de un archivo `app.min.js`. Sin embellecedor, es imposible localizar visualmente el bloque. Pega el archivo en un embellecedor y obtienes código estructurado, navegable, listo para cruzarlo con tu source map.

Before optimization

Tamaño de archivos: 1 línea ilegible
Tiempo de carga: Debug imposible

After optimization

Tamaño de archivos: Código aéreo e indentado
Tiempo de carga: Bug localizado en unos segundos

Casos de uso frecuentes

Estas son las situaciones en las que más tiempo ganarás con un embellecedor:

Leer un payload JSON de API devuelto en una sola línea por un backend mal configurado

Inspeccionar un SVG exportado de Figma o Illustrator para entender su estructura

Comparar dos versiones de un archivo minificado para detectar las diferencias reales

Retomar un proyecto heredado donde el HTML lo ha inlinado un CMS

Auditar código ofuscado compartido por un cliente o encontrado en un repositorio

Embellecer ≠ desofuscación

Un embellecedor reindenta el código, pero no renombra las variables `a`, `b`, `c` producidas por un minificador agresivo. Para ir más lejos, combínalo con una source map o una herramienta de renombrado. Para JS en concreto, consulta nuestra guía dedicada a la desminificación JavaScript para la depuración.

Workflow de editor y hooks pre-commit

VS Code, JetBrains, Vim: Format on Save

Activar el formateo automático al guardar elimina el 90 % de los debates de estilo en la revisión de código. Todo el equipo converge hacia la misma norma sin esfuerzo.

VS Code: extensión Prettier + `"editor.formatOnSave": true` en settings.json

VS Code: `"editor.codeActionsOnSave": { "source.fixAll.eslint": true }` para ESLint --fix

JetBrains (WebStorm, PhpStorm): Settings → Tools → Actions on Save → Reformat code

Vim/Neovim: `null-ls` o `conform.nvim` con Prettier como formateador

EditorConfig (`.editorconfig`): reglas comunes leídas por todos los editores (indent, eol, charset)

Hooks pre-commit: la última línea de defensa

Con Husky y lint-staged, cada commit embellece automáticamente los archivos modificados. Ningún PR vuelve a contener ruido de formateo.

Convenciones que hay que fijar en equipo

Un embellecedor no sirve de nada si la config diverge entre máquinas. Centraliza todo en el repositorio:

Versionar `.prettierrc`, `.editorconfig` y `eslint.config.mjs` en la raíz del proyecto

Añadir `.prettierignore` para excluir archivos minificados y carpetas de build

Documentar en el README el comando `npm run format` que ejecuta el pipeline completo

Bloquear los PR vía CI si `prettier --check` o `eslint` reportan errores

Combinar con un minificador CSS en línea para comprobar rápido el renderizado de producción

Embellecer vs minificar: dos caras del mismo ciclo

Definición rápida

Embellecer formatea el código para humanos; minificar lo comprime para producción. Ambas operaciones conservan la semántica: un archivo válido sigue válido tras cada pasada. Ejemplo en JavaScript:

Antes

function add(a,b){return a+b;}const result=add(1,2);console.log(result);

Después

function add(a, b) {
  return a + b;
}

const result = add(1, 2);
console.log(result);

Qué hace (y qué no hace) un embellecedor

Un embellecedor trabaja sobre la forma, no sobre la lógica. Esta es la frontera que hay que conocer:

HACE: reindentación, saltos de línea, espaciado alrededor de los operadores

HACE: orden opcional de propiedades CSS, imports JS o claves JSON

HACE: añadido de puntos y coma opcionales y conversión de comillas

NO HACE: renombrado de variables minificadas (`a` no vuelve a ser `userName`)

NO HACE: reconstrucción de código ofuscado (eval, concatenación de strings, packers)

Embellecer en un clic con FastMinify

Workflow rápido en el navegador

Cada herramienta FastMinify expone un botón «Embellecer» junto a «Minificar». El procesamiento se queda 100 % en el cliente: sin envío al servidor, ideal para archivos sensibles o payloads internos.

Elegir la herramienta según el lenguaje

Usa el embellecedor JavaScript para JS, el embellecedor CSS para hojas de estilo, y así sucesivamente para HTML, JSON, XML y SVG.

Pegar el código minificado

Pega el contenido en el editor de la izquierda. La herramienta detecta la sintaxis y señala los errores antes de formatear.

Hacer clic en Embellecer

El código reformateado aparece al instante a la derecha. Copia el resultado o descárgalo para reutilizarlo en tu IDE.

Por qué elegir una herramienta en línea

La herramienta en línea cubre los casos en los que no tienes acceso a tu stack o a un entorno de desarrollo (soporte al cliente, auditoría one-shot, compartir rápido).

Seis lenguajes cubiertos en un solo sitio: JS, CSS, JSON, HTML, XML, SVG

Sin instalación, sin cuenta, gratuito y sin límite

Privacidad por diseño: el código no se envía a un servidor

Botón «Minificar» justo al lado para el retorno a producción

Compatible con un <a href="/es/json-formatter" class="text-primary hover:underline">formateador JSON en línea</a> del lado API y un <a href="/es/optimize-svg" class="text-primary hover:underline">optimizador SVG SVGO en línea</a> del lado assets

Embellecer en tu editor y tus scripts

Prettier: el estándar JS, CSS, HTML, JSON

Prettier es la herramienta de referencia. Se instala con un comando y funciona en casi todos los lenguajes front-end. Configúralo vía `.prettierrc` y activa «Format on Save» en VS Code para no volver a pensarlo.

Configuration

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}

Uso

# Instalación
npm install --save-dev --save-exact prettier

# Embellecer todo el proyecto
npx prettier --write "**/*.{js,ts,css,html,json,md}"

# Verificar sin modificar (CI)
npx prettier --check "**/*.{js,ts,css,html,json,md}"

ESLint --fix para JavaScript y TypeScript

ESLint corrige automáticamente problemas de estilo Y de calidad (variables no usadas, imports no ordenados). Combínalo con Prettier vía `eslint-config-prettier` para evitar conflictos.

Configuration

// eslint.config.mjs
export default [
  {
    rules: {
      'indent': ['error', 2],
      'quotes': ['error', 'single'],
      'semi': ['error', 'always']
    }
  }
];

Uso

# Autocorregir todos los archivos
npx eslint . --fix

# Combinar con Prettier
npx eslint . --fix && npx prettier --write .

HTML, JSON, JSON.stringify y jq

Para embellecer sin instalar Prettier, herramientas nativas o integradas hacen el trabajo: `JSON.stringify(obj, null, 2)` en Node, `jq '.'` en la línea de comandos, `html-beautify` para HTML heredado.

Ejemplo básico

// Embellecer JSON en JavaScript nativo
const minified = '{"user":{"name":"Ada","age":36}}';
const pretty = JSON.stringify(JSON.parse(minified), null, 2);
console.log(pretty);

Uso

# Embellecer un JSON con jq
jq '.' minified.json > pretty.json

# Embellecer HTML con js-beautify
npx js-beautify --type html input.html -o output.html

# Embellecer un SVG con xmllint
xmllint --format icon.svg > icon.pretty.svg

Embellecer por lenguaje: ejemplos concretos

JavaScript y TypeScript

Recupera un bundle de producción y obtén código legible en unos segundos. Consejo: si trabajas sobre código minificado sin source map, consulta también nuestra guía cómo desminificar JavaScript para la depuración.

Ejemplo JavaScript

function fetchUser(id){return fetch(`/api/users/${id}`).then(r=>r.json()).catch(e=>console.error(e));}

Línea de comandos

function fetchUser(id) {
  return fetch(`/api/users/${id}`)
    .then((r) => r.json())
    .catch((e) => console.error(e));
}

Herramienta en línea: <a href="/es/unminify-js" class="text-primary hover:underline">desminificador JavaScript en línea</a>

CLI: `prettier --write src/**/*.{js,ts}`

Editor: Prettier + Format on Save en VS Code

CSS y preprocesadores

El CSS minificado elimina todos los espacios y agrupa los selectores. Un embellecedor restaura la estructura y facilita la auditoría de las cascadas.

Ejemplo JavaScript

.btn{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background:#3b82f6;color:#fff}

Línea de comandos

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background: #3b82f6;
  color: #fff;
}

Herramienta en línea: <a href="/es/beautify-css" class="text-primary hover:underline">embellecedor CSS en línea</a>

CLI: `prettier --write **/*.css` o `stylelint --fix`

Workflow: para volver a prod, pasa de nuevo por el <a href="/es/minify-css" class="text-primary hover:underline">minificador CSS</a>

JSON, HTML, XML y SVG

Los formatos declarativos ganan muchísimo al leerse con una indentación limpia. Es especialmente cierto para las exportaciones SVG de Illustrator y los sitemaps XML voluminosos.

JSON: <a href="/es/beautify-json" class="text-primary hover:underline">embellecedor JSON en línea</a> o `JSON.stringify(obj, null, 2)`

HTML: <a href="/es/beautify-html" class="text-primary hover:underline">embellecedor HTML en línea</a> o `js-beautify --type html`

XML: <a href="/es/beautify-xml" class="text-primary hover:underline">embellecedor XML en línea</a> o `xmllint --format`

SVG: <a href="/es/beautify-svg" class="text-primary hover:underline">embellecedor SVG en línea</a> con modo Embellecer para releer una exportación de Figma — <a href="/es/optimize-svg" class="text-primary hover:underline">optimizar SVG</a> para la profundidad SVGO

Consejo: para comparar una versión dev (embellecida) y una versión prod (minificada), mantén ambos archivos lado a lado

Conclusión

Embellecer código no es un lujo: es el reflejo que transforma una hora de debug en cinco minutos, que hace posible una auditoría sobre código de terceros y que alinea a tu equipo en un estándar compartido. El buen workflow combina una herramienta en línea para los casos one-shot (debug de un bundle de prod, lectura de una exportación de cliente) y una cadena automatizada — Prettier, ESLint, EditorConfig, hooks pre-commit — para tus proyectos cotidianos. Para el retorno a producción, pasa tus archivos por un minificador; es la otra cara del mismo ciclo. Para ir más lejos en la elección entre herramienta en línea y build tool, lee nuestro comparativo minificadores en línea vs herramientas de build.

Embellece o minifica tu código en unos segundos

Para un archivo puntual: pasa por las herramientas en línea FastMinify (JS, CSS, JSON, HTML, XML, SVG)

Para un proyecto: instala Prettier + ESLint y activa Format on Save

Versiona `.prettierrc`, `.editorconfig` y `eslint.config.mjs` para alinear a todo el equipo

Añade Husky + lint-staged para embellecer automáticamente en cada commit

Cierra el ciclo: embellecer en dev, minificar en prod vía el <a href="/es/minify-js" class="text-primary hover:underline">minificador JS en línea</a>

Compartir este artículo

Compartir este artículo:

Embellecer código en línea: JS, CSS, HTML y JSON legibles

¿Por qué embellecer código?

Cuándo un embellecedor lo cambia todo

Workflow de editor y hooks pre-commit

Embellecer vs minificar: dos caras del mismo ciclo

Antes

Después

Embellecer en un clic con FastMinify

Elegir la herramienta según el lenguaje

Pegar el código minificado

Hacer clic en Embellecer

Embellecer en tu editor y tus scripts

Configuration

Uso

Configuration

Uso

Ejemplo básico

Uso

Embellecer por lenguaje: ejemplos concretos

Ejemplo JavaScript

Línea de comandos

Ejemplo JavaScript

Línea de comandos

Conclusión

Artículos relacionados