Mis herramientas

Formateador de código

Pega código y se maqueta solo: lenguaje detectado y sin botones que pulsar.

Cómo se usa

  1. Pega código en la caja: se formatea mientras escribes, sin ningún botón que pulsar.
  2. El lenguaje se detecta a partir del código. Si la detección falla, elige uno de la lista; 2 o 4 espacios y 80, 100 o 120 columnas se aplican de inmediato.
  3. Copia el resultado o descárgalo con la extensión correcta (.js, .ts, .json, .py…).

Ejemplo

Entrada

function saludar(usuario){if(!usuario){return "Hola, invitado";}const etiquetas=["nuevo","activo"];return `Hola, ${usuario.name}!`;}
export default saludar;

Formateado

function saludar(usuario) {
  if (!usuario) {
    return "Hola, invitado";
  }
  const etiquetas = ["nuevo", "activo"];
  return `Hola, ${usuario.name}!`;
}
export default saludar;

Formateado con las reglas por defecto (2 espacios, 80 columnas). Prettier añade puntos y coma y comillas dobles; la plantilla de cadena y el valor de reserva para invitados no cambian.

Reglas, límites y problemas conocidos

  • El formato cambia los espacios en blanco y las normalizaciones propias del formateador (comillas, puntos y coma, comas finales); nunca ejecuta código, ordena claves ni renombra identificadores. Las cadenas conservan su contenido.
  • Motores: Prettier para JavaScript, TypeScript, JSON, CSS, SCSS, Less, HTML, Vue y GraphQL; Ruff (compatible con Black) para Python. Solo se descarga el motor del lenguaje actual, en el primer uso, y el navegador lo guarda en caché.
  • La detección automática es una heurística. Un fragmento que empieza por una etiqueta puede leerse como HTML aunque sea JSX; elige JavaScript o TypeScript manualmente. Un objeto con aspecto de JSON que no es JSON válido pasa a JavaScript.
  • La selección manual es la que manda: elegir CSS nunca formatea en silencio como SCSS. TypeScript prueba .ts y después .tsx.
  • JSON usa el analizador json de Prettier, así que los objetos cortos pueden quedar en una línea. Para validación estricta, orden de claves o minificado, usa la caja de herramientas JSON. Las claves duplicadas conservan el último valor, como hace JSON.parse.
  • El estilo por defecto de Prettier es fijo: comillas dobles, puntos y coma y comas finales donde sean válidas. No se leen .prettierrc ni .editorconfig y no hay opciones de comillas o puntos y coma. Python usa comillas dobles y respeta las comas finales mágicas (Ruff/Black).
  • El espacio en blanco de HTML sigue htmlWhitespaceSensitivity: css, así que los espacios alrededor de elementos en línea pueden diferir del original. No se admiten Markdown, YAML ni XML; el editor de Markdown, el conversor de configuración y el formateador XML cubren esos formatos.
  • La salida es LF sin salto final, y el formateo es idempotente. Por encima de 200.000 caracteres el resultado se actualiza unos 0,6 s después de que dejes de escribir; el formato se ejecuta en un Web Worker y el texto nunca se sube, se pone en la URL ni se guarda.

Lo que suele hacer falta después, una vez legible el código.

Caja de herramientas JSON

Formateador SQL

Formateador XML