Navegador

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Ejecuta Prettier en el navegador utilizando su versión standalone. Esta versión no depende de Node.js. Solo formatea el código y no incluye soporte para archivos de configuración, archivos ignore, uso CLI ni carga automática de plugins.

La versión standalone está disponible como:

Módulos ES: standalone.mjs, a partir de la versión 3.0 (En la versión 2, esm/standalone.mjs.)
UMD: standalone.js, a partir de la versión 1.13

El campo browser en el package.json de Prettier apunta a standalone.js. Por eso puedes simplemente import o require el módulo prettier para acceder a su API, manteniendo tu código compatible tanto con Node como con el navegador siempre que uses webpack u otro empaquetador que soporte el campo browser. Esto es especialmente conveniente para plugins.

`prettier.format(code, options)`

Opciones requeridas:

parser (o filepath): Debes especificar una de estas opciones para que Prettier sepa qué parser usar.
plugins: A diferencia de la función format de la API basada en Node.js, esta función no carga los plugins automáticamente. La opción plugins es obligatoria porque todos los parsers incluidos en el paquete de Prettier vienen como plugins (por razones de tamaño de archivo). Estos plugins son archivos en https://unpkg.com/browse/prettier@%PRETTIER_VERSION%/plugins. Ten en cuenta que se debe cargar el plugin estree al imprimir JavaScript, TypeScript, Flow o JSON.

Debes cargar aquellos que vayas a usar y pasarlos a prettier.format mediante la opción plugins.

Consulta los ejemplos a continuación.

Uso

Global

<script src="https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.js"></script>
<script src="https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/graphql.js"></script>
<script>
  (async () => {
    const formatted = await prettier.format("type Query { hello: String }", {
      parser: "graphql",
      plugins: prettierPlugins,
    });
  })();
</script>

Nota que el campo unpkg en el package.json de Prettier apunta a standalone.js, por eso https://unpkg.com/prettier también puede usarse en lugar de https://unpkg.com/prettier/standalone.js.

Módulos ES

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.mjs";
  import * as prettierPluginGraphql from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/graphql.mjs";

  const formatted = await prettier.format("type Query { hello: String }", {
    parser: "graphql",
    plugins: [prettierPluginGraphql],
  });
</script>

AMD

define([
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.js",
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/graphql.js",
], async (prettier, ...plugins) => {
  const formatted = await prettier.format("type Query { hello: String }", {
    parser: "graphql",
    plugins,
  });
});

CommonJS

const prettier = require("prettier/standalone");
const prettierPluginGraphql = require("prettier/plugins/graphql");

(async () => {
  const formatted = await prettier.format("type Query { hello: String }", {
    parser: "graphql",
    plugins: [prettierPluginGraphql],
  });
})();

Esta sintaxis no funciona necesariamente en el navegador, pero puede usarse al empaquetar el código con browserify, Rollup, webpack u otro empaquetador.

Worker

Module worker
Classic worker

import * as prettier from "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.mjs";
import * as prettierPluginGraphql from "https://unpkg.com/prettier@%PRETTIER_VERSION%1/plugins/graphql.mjs";

const formatted = await prettier.format("type Query { hello: String }", {
  parser: "graphql",
  plugins: [prettierPluginGraphql],
});

importScripts(
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.js",
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/graphql.js",
);

(async () => {
  const formatted = await prettier.format("type Query { hello: String }", {
    parser: "graphql",
    plugins: prettierPlugins,
  });
})();

Plugins de parser para código embebido

Si deseas formatear código embebido, también necesitas cargar los plugins relacionados. Por ejemplo:

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.mjs";
  import * as prettierPluginBabel from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/babel.mjs";
  import * as prettierPluginEstree from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/estree.mjs";

  console.log(
    await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
      parser: "babel",
      plugins: [prettierPluginBabel, prettierPluginEstree],
    }),
  );
  // Output: const html = /* HTML */ `<DIV> </DIV>`;
</script>

El código HTML embebido en JavaScript permanece sin formatear porque el parser html no se ha cargado. Uso correcto:

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.mjs";
  import * as prettierPluginBabel from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/babel.mjs";
  import * as prettierPluginEstree from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/estree.mjs";
  import * as prettierPluginHtml from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/html.mjs";

  console.log(
    await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
      parser: "babel",
      plugins: [prettierPluginBabel, prettierPluginEstree, prettierPluginHtml],
    }),
  );
  // Output: const html = /* HTML */ `<div></div>`;
</script>

prettier.format(code, options)​

Uso​

Global​

Módulos ES​

AMD​

CommonJS​

Worker​

Plugins de parser para código embebido​