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

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>