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 : Contrairement à la fonction format de l'API basée sur Node.js, cette fonction ne charge pas automatiquement les plugins. L'option plugins est requise car tous les analyseurs inclus dans le package Prettier sont fournis sous forme de plugins (pour des raisons de taille de fichier). Ces plugins sont des fichiers disponibles sur https://unpkg.com/browse/prettier@%PRETTIER_VERSION%/plugins. Notez que le plugin estree doit être chargé lors de l'impression de JavaScript, TypeScript, Flow ou JSON.

    Vous devez charger ceux que vous allez utiliser et les passer à prettier.format via l'option plugins.

Voir les exemples ci-dessous.

Utilisation​

Globale​

<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>

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@%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],
  });
})();

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@%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],
});

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@%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>

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@%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>