OnlineConverTools
Iniciar sesión

Formateador de código

Formatea tu código JavaScript, TypeScript, JSX, JSON, HTML, XML, CSS, SCSS, LESS, SQL, YAML, Markdown o GraphQL y hazlo legible

Acerca de Formateador de código

«Formateador de código» formatea 13 lenguajes en tu navegador y averigua cuál pegaste. JavaScript, TypeScript, JSX, HTML, CSS, SCSS, LESS, YAML, Markdown y GraphQL pasan por Prettier 3; XML, por el plugin XML de Prettier, tras comprobar que está bien formado; SQL, por sql-formatter, con 20 dialectos; JSON, por el código propio del sitio que vuelve a aplicar la sangría y conserva cada número, cada secuencia de escape y el orden de las claves tal como se escribieron. Prettier aplica su propio estilo, así que las comillas, los puntos y coma y los saltos de línea pueden cambiar. Cuando el motor indica un error de sintaxis, no se formatea nada y la salida muestra el mensaje con su posición siempre que el motor la dé.

Ejemplo

Con «Detección automática», este código se lee como GraphQL; la línea bajo la salida dice «Formateado como GraphQL (detectado)».

Entrada

query{user(id:1){name,friends(first:2){name}}}

Salida

query {
  user(id: 1) {
    name
    friends(first: 2) {
      name
    }
  }
}

Cómo formatear código en línea

  1. 1Pega tu código en «Entrada».
  2. 2Deja «Detección automática» en la lista «Lenguaje» o elige el lenguaje; para SQL aparece una lista «Dialecto SQL».
  3. 3Haz clic en «Formatear».
  4. 4Revisa la línea bajo la salida, que indica el lenguaje usado, y luego haz clic en «Copiar» o «Descargar».

Formatos y límites

Lenguajes
JavaScript, TypeScript, JSX (React), JSON, HTML, XML, CSS, SCSS, LESS, SQL, YAML, Markdown, GraphQL
Dialectos SQL
20: SQL estándar, MySQL, MariaDB, PostgreSQL, SQLite, SQL Server (T-SQL), Oracle (PL/SQL), BigQuery, Snowflake, Amazon Redshift, ClickHouse, DuckDB, Trino / Presto, Spark SQL, Hive, IBM Db2, IBM Db2 for i, SingleStore, TiDB, N1QL (Couchbase)
Estilo
Prettier con un ancho de línea de 80 caracteres y sangría de 2 espacios (el texto de los elementos XML se conserva tal como está escrito); JSON con sangría de 2 espacios; palabras clave de SQL en mayúsculas
Detección
Lee sobre todo los primeros 4000 caracteres (el JSON se comprueba en todo el texto); una detección errónea se corrige eligiendo el lenguaje

Dónde se procesa tu código

El formato se aplica en el navegador: cada formateador (Prettier con el plugin que necesita un lenguaje, o sql-formatter) se carga la primera vez que formateas ese lenguaje, y tu código nunca se sube. Si el formato falla, la primera línea del error, como «Línea 3, columna 12: Unexpected token», se envía a nuestro registro de errores con el nombre de la herramienta y el nombre y la versión de tu navegador, sin los pasajes entre comillas, los números largos ni las direcciones.

Preguntas frecuentes

¿Puede detectar el lenguaje automáticamente?

Sí, a partir del propio texto: sus primeros caracteres (una etiqueta, una llave, una palabra clave de SQL o GraphQL) y marcas que solo tiene un lenguaje, como las anotaciones de tipo de TypeScript o las $variables de SCSS. Si se equivoca, elige el lenguaje y vuelve a hacer clic en «Formatear».

¿El formato cambia mi código?

En JSON, no: solo cambian los espacios en blanco, y los números como 1.10 o los ID de 20 dígitos se copian tal como están escritos. En los demás lenguajes, sí en el estilo: Prettier puede cambiar las comillas, añadir puntos y coma y dividir las líneas largas, y las palabras clave de SQL pasan a mayúsculas.

¿Muestra dónde está un error de sintaxis?

Sí, cuando el motor indica una posición: la salida empieza con la línea, la columna y el mensaje, y luego muestra las líneas de alrededor con un ^. No se formatea nada. Algunos errores llegan sin posición y solo se muestran como mensaje.

¿Qué dialectos SQL admite?

20, que se eligen en la lista «Dialecto SQL» que aparece para SQL, entre ellos MySQL, PostgreSQL, SQLite, SQL Server (T-SQL), Oracle (PL/SQL), BigQuery, Snowflake, ClickHouse y DuckDB. «Formateador SQL» usa el mismo motor con una lista más corta.

Consejos y trucos

  • ✓Pega un archivo JavaScript, CSS o HTML minificado para hacerlo legible antes de depurarlo.
  • ✓Para JSON con sangría de 4 espacios o de tabulación, o con las claves ordenadas, usa «Formateador JSON», que tiene esas opciones.

Herramientas relacionadas