Formateador JavaScript

Qué hace el formateador JavaScript

Un formateador JavaScript es la forma más rápida de leer código escrito por varias personas, copiado de un foro o sacado de un bundle minificado. En ese código los espacios cambian de una línea a otra, las cadenas largas de métodos se salen de la pantalla y los callbacks anidados pierden su forma. El formateador reescribe la disposición del código con un único conjunto de reglas, para que te concentres en lo que hace.

Esta página ejecuta Prettier 3, un formateador de código abierto muy usado, directamente en tu navegador. El analizador de JavaScript solo se descarga la primera vez que formateas algo, y tu código nunca sale de la página.

Cómo usarlo

1. Pega JavaScript o JSX en el cuadro de la izquierda. Se formatea justo después de pegarlo.
2. O pulsa Abrir archivo para cargar un archivo .js, o Ejemplo para ver una muestra.
3. Elige las opciones:
   • Sangría: 2 espacios, 4 espacios o tabulaciones.
   • Ancho de línea: 80, 100, 120 o 160 caracteres antes de partir una línea.
   • Comas finales: Todas, ES5 o Ninguna.
   • Comillas simples: usa 'text' en lugar de "text".
   • Punto y coma: activado, los añade al final de las sentencias; desactivado, los quita donde es seguro.
4. Pulsa Formatear o Ctrl+Intro.
5. Pulsa Copiar, o Descargar para guardar un archivo .js.

Después de la primera vez, el resultado se actualiza mientras escribes, y al cambiar una opción se vuelve a formatear al instante.

Antes y después

Entrada minificada:

const total=items=>items.filter(i=>i.qty>0).reduce((sum,{price,qty})=>sum+price*qty,0);async function load(url){const res=await fetch(url);if(!res.ok){throw new Error('Request failed: '+res.status)}return res.json()}

Después de Formatear con las opciones predeterminadas:

const total = (items) =>
  items
    .filter((i) => i.qty > 0)
    .reduce((sum, { price, qty }) => sum + price * qty, 0);
async function load(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("Request failed: " + res.status);
  }
  return res.json();
}

El parámetro de la función flecha recibe paréntesis, la cadena de métodos se parte en una llamada por línea porque no cabe en 80 caracteres y las comillas simples pasan a ser dobles. Con el Ancho de línea en 100, la misma cadena cabe en una sola línea:

const total = (items) =>
  items.filter((i) => i.qty > 0).reduce((sum, { price, qty }) => sum + price * qty, 0);

Comillas, punto y coma y comas finales

Estas tres opciones cubren la mayoría de los debates de estilo en un equipo.

Con Comillas simples activado y Punto y coma desactivado:

const name = 'Ada'
let list = [1, 2, 3]

Comas finales decide si el último elemento de una lista o un objeto de varias líneas lleva coma. Todas, la opción predeterminada de Prettier, da:

const user = {
  firstName: "Ada",
  lastName: "Lovelace",
  email: "[email protected]",
  role: "admin",
};

Ninguna quita la última coma después de "admin". Las comas finales hacen los diffs más limpios, porque añadir un elemento solo cambia una línea. ES5 las añade en arrays y objetos, pero no en los parámetros de funciones, pensando en entornos muy antiguos.

JSX

Los componentes de React también se formatean:

const App = () => (
  <div className="app">
    <h1>Hello</h1>
    <p>{name}</p>
  </div>
);

Errores de sintaxis

Si el código no se puede analizar, el formateador se detiene y te dice dónde. Para un objeto al que le falta una coma:

const a = {
  b: 1
  c: 2
};

el mensaje es Línea 3, columna 3: Unexpected token, expected ",". Pulsa Mostrar en la entrada para ir a ese punto. Una función a la que le falta la llave de cierre da Línea 3, columna 1: Unexpected token, que señala el final de la entrada, donde el analizador esperaba }.

El formateador no ejecuta tu código ni lo analiza con un linter. Las variables sin usar, los nombres de función equivocados y los errores de lógica no se señalan.

Consejos

• Acuerda las opciones con tu equipo una sola vez y escríbelas en un archivo .prettierrc del proyecto, para que los editores y esta página den el mismo resultado.
• Usa el formateador antes de leer código que no conoces. Una disposición que sigue la estructura hace que los errores de anidamiento salten a la vista.
• Para código con anotaciones de tipo, usa el formateador TypeScript. El analizador de JavaScript se detiene en el primer : string.
• Para datos en lugar de código, el formateador JSON es más estricto y además valida.

Otras formas de formatear JavaScript

• VS Code: Dar formato al documento (Mayús+Alt+F en Windows, Mayús+Option+F en macOS). Instala la extensión de Prettier y elígela como formateador predeterminado para obtener el mismo resultado que esta página.
• Línea de comandos: npx prettier --write src/app.js, o npx prettier --check . en CI para que falle la compilación cuando haya archivos sin formatear.
• Herramientas para desarrolladores del navegador: el botón para mostrar con formato del panel Sources (Fuentes) hace legibles los scripts minificados mientras depuras.

Los scripts que están dentro de una página HTML se pueden formatear junto con el marcado en el formateador HTML.