Zum Hauptinhalt springen

Browser

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Verwenden Sie Prettier im Browser über die Standalone-Version. Diese Version hat keine Abhängigkeiten zu Node.js. Sie formatiert lediglich Code und bietet keine Unterstützung für Konfigurationsdateien, Ignore-Dateien, CLI-Nutzung oder automatisches Laden von Plugins.

Die Standalone-Version liegt in folgenden Formaten vor:

  • ES-Module: standalone.mjs, ab Version 3.0 (In Version 2: esm/standalone.mjs)

  • UMD: standalone.js, ab Version 1.13

Das browser-Feld in Prettiers package.json verweist auf standalone.js. Daher können Sie einfach das prettier-Modul per import oder require laden, um auf die Prettier-API zuzugreifen. Ihr Code bleibt so mit Node.js und Browsern kompatibel, solang Webpack oder ein anderer Bundler verwendet wird, der das browser-Feld unterstützt. Dies ist besonders praktisch für Plugins.

prettier.format(code, options)​

Erforderliche Optionen:

  • parser (oder filepath): Eine dieser Optionen muss angegeben werden, damit Prettier den zu verwendenden Parser ermitteln kann.

  • plugins: Im Gegensatz zur format-Funktion der Node.js-basierten API lädt diese Funktion Plugins nicht automatisch. Die Option plugins ist erforderlich, weil alle in Prettier enthaltenen Parser als Plugins vorliegen (aus Gründen der Dateigröße). Diese Plugins findest du unter https://unpkg.com/browse/prettier@3.8.3/plugins. Beachte, dass das estree-Plugin geladen werden muss, wenn du JavaScript, TypeScript, Flow oder JSON formatierst.

    Du musst die Plugins laden, die du verwenden möchtest, und sie über die Option plugins an prettier.format übergeben.

Siehe Beispiele unten.

Verwendung​

Global​

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

Hinweis: Das unpkg-Feld in Prettiers package.json verweist auf standalone.js. Daher kann statt https://unpkg.com/prettier/standalone.js auch https://unpkg.com/prettier verwendet werden.

ES-Module​

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

Diese Syntax funktioniert nicht zwangsläufig im Browser, kann aber beim Bundeln des Codes mit Browserify, Rollup, Webpack oder anderen Bundlern verwendet werden.

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

Parser-Plugins für eingebetteten Code​

Um eingebetteten Code zu formatieren, müssen auch zugehörige Plugins geladen werden. Beispiel:

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

Der in JavaScript eingebettete HTML-Code bleibt unformatiert, weil der html-Parser nicht geladen wurde. Korrekte Verwendung:

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