Aller au contenu principal

Navigateur

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Exécutez Prettier dans le navigateur en utilisant sa version autonome. Cette version ne dépend pas de Node.js. Elle se contente de formater le code et ne prend pas en charge les fichiers de configuration, les fichiers ignore, l'utilisation en CLI ou le chargement automatique de plugins.

La version autonome est disponible sous ces formats :

  • Modules ES : standalone.mjs, à partir de la version 3.0 (Dans la version 2, esm/standalone.mjs.)

  • UMD : standalone.js, à partir de la version 1.13

Le champ browser dans le package.json de Prettier pointe vers standalone.js. C'est pourquoi vous pouvez simplement import ou require le module prettier pour accéder à l'API Prettier, et votre code reste compatible avec Node et le navigateur tant que webpack ou un autre bundler supportant le champ browser est utilisé. Ceci est particulièrement pratique pour les plugins.

prettier.format(code, options)​

Options requises :

  • parser (ou filepath) : Une de ces options doit être spécifiée pour que Prettier sache quel analyseur utiliser.

  • plugins: Unlike the format function from the Node.js-based API, this function doesn’t load plugins automatically. The plugins option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in https://unpkg.com/browse/prettier@3.8.3/plugins. Note that estree plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.

    You need to load the ones that you’re going to use and pass them to prettier.format using the plugins option.

Voir les exemples ci-dessous.

Utilisation​

Globale​

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

Notez que le champ unpkg dans le package.json de Prettier pointe vers standalone.js, c'est pourquoi https://unpkg.com/prettier peut aussi être utilisé à la place de https://unpkg.com/prettier/standalone.js.

Modules ES​

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

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

AMD​

define([
  "https://unpkg.com/prettier@3.8.3/standalone.js",
  "https://unpkg.com/prettier@3.8.3/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 plugins = [require("prettier/plugins/graphql")];

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

Cette syntaxe ne fonctionne pas nécessairement dans le navigateur, mais peut être utilisée lors du bundling du code avec browserify, Rollup, webpack ou un autre bundler.

Worker​

import * as prettier from "https://unpkg.com/prettier@3.8.3/standalone.mjs";
import * as prettierPluginGraphql from "https://unpkg.com/prettier@3.8.31/plugins/graphql.mjs";

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

Plugins d'analyseur pour le code embarqué​

Si vous souhaitez formater du code embarqué, vous devez également charger les plugins associés. Par exemple :

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@3.8.3/standalone.mjs";
  import * as prettierPluginBabel from "https://unpkg.com/prettier@3.8.3/plugins/babel.mjs";
  import * as prettierPluginEstree from "https://unpkg.com/prettier@3.8.3/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>

Le code HTML embarqué dans JavaScript reste non formaté car l'analyseur html n'a pas été chargé. Utilisation correcte :

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@3.8.3/standalone.mjs";
  import * as prettierPluginBabel from "https://unpkg.com/prettier@3.8.3/plugins/babel.mjs";
  import * as prettierPluginEstree from "https://unpkg.com/prettier@3.8.3/plugins/estree.mjs";
  import * as prettierPluginHtml from "https://unpkg.com/prettier@3.8.3/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>