Formatear JavaScript

El código formateado

Aplicar el formateador al JavaScript minificado de arriba produce:

const calculateTotal = (items, discount) => {
  let total = 0;
  for (const item of items) {
    total += item.price * item.quantity;
  }
  if (discount > 0) {
    total = total * (1 - discount / 100);
  }
  return Math.round(total * 100) / 100;
};

const formatCurrency = (amount) =>
  new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(amount);

async function fetchProducts(category) {
  const response = await fetch(`/api/products?category=${category}`);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const data = await response.json();
  return data.products
    .filter((p) => p.inStock)
    .sort((a, b) => a.price - b.price);
}

export { calculateTotal, formatCurrency, fetchProducts };

Cada sentencia queda en su propia línea. Los cuerpos de las arrow functions se dividen en varias líneas cuando superan el ancho de impresión. Se agregan comas finales a las construcciones multilínea para que los diffs queden más limpios.

Por qué importa formatear JavaScript

El JavaScript sin formatear es una carga de mantenimiento. Un one-liner minificado funciona cuando lo escribes, pero se vuelve ilegible en cuanto otra persona necesita modificarlo. Formatear hace varias cosas más rápidas:

Revisión de código. Un revisor puede comprobar la lógica de una función, la destructuración de argumentos y el flujo de control por separado cuando cada sentencia está en su propia línea. Una función de una sola línea te obliga a analizar mentalmente toda la cadena para verificar cualquier parte.

Depuración. Cuando una función devuelve resultados incorrectos, normalmente aíslas el problema con sentencias console.log o comentando líneas. Con código bien formateado ese proceso es sencillo.

Diffs en pull requests. Un cambio en una condición debería mostrarse como una sola línea modificada en un diff. En un archivo minificado, cualquier cambio toca toda la línea y el diff no sirve para revisar.

Decisiones de estilo de Prettier

El formateador usa los valores opinados por defecto de Prettier. No se pueden configurar en esta herramienta, pero cubren las convenciones más comunes:

Punto y coma: siempre se agregan. Esto evita errores de ASI (inserción automática de punto y coma) que son difíciles de depurar.

Comillas: comillas dobles para los strings. Es el valor por defecto de Prettier y evita escapes cuando los strings contienen apóstrofes.

Comas finales: se agregan a arrays, objetos y parámetros de función multilínea. Esto produce diffs de git más limpios porque el último elemento se puede cambiar sin agregar una coma a la línea anterior.

Indentación: 2 espacios. Es la convención más común en proyectos JavaScript y coincide con el valor por defecto de la mayoría de linters y editores.

Ancho de impresión: 80 caracteres. Las líneas que lo superan se dividen en puntos lógicos (después de flechas, antes de operadores, en límites de argumentos).

Cuándo no usar Prettier

Prettier es un formateador de código, no un linter. No detecta errores, no impone buenas prácticas ni marca variables sin usar. Para eso usa ESLint. Prettier tampoco organiza el código: no va a mover funciones entre archivos, reordenar imports (salvo con un plugin) ni reestructurar tu sistema de módulos. Algunos estilos de código son realmente mejores que los valores por defecto de Prettier para casos específicos: tabs para indentación, comillas simples, sin punto y coma. Si tu proyecto ya tiene un estilo establecido distinto al de Prettier, configura Prettier en consecuencia o usa otro formateador.