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: Anders als die format-Funktion aus der Node.js-basierten API lädt diese Funktion Plugins nicht automatisch. Die plugins-Option ist erforderlich, weil alle Parser im Prettier-Paket als Plugins vorliegen (aus Gründen der Dateigröße). Diese Plugins sind Dateien unter https://unpkg.com/browse/prettier@3.8.1/plugins. Beachte, dass das estree-Plugin geladen werden sollte, wenn du JavaScript, TypeScript, Flow oder JSON formatierst.

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

Siehe Beispiele unten.

Verwendung​

Global​

<script src="https://unpkg.com/prettier@3.8.1/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.8.1/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.1/standalone.mjs";
  import * as prettierPluginGraphql from "https://unpkg.com/prettier@3.8.1/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.1/standalone.js",
  "https://unpkg.com/prettier@3.8.1/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.1/standalone.mjs";
import * as prettierPluginGraphql from "https://unpkg.com/prettier@3.8.11/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.1/standalone.mjs";
  import * as prettierPluginBabel from "https://unpkg.com/prettier@3.8.1/plugins/babel.mjs";
  import * as prettierPluginEstree from "https://unpkg.com/prettier@3.8.1/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.1/standalone.mjs";
  import * as prettierPluginBabel from "https://unpkg.com/prettier@3.8.1/plugins/babel.mjs";
  import * as prettierPluginEstree from "https://unpkg.com/prettier@3.8.1/plugins/estree.mjs";
  import * as prettierPluginHtml from "https://unpkg.com/prettier@3.8.1/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>