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 plugins-Option ist erforderlich, da alle im Prettier-Paket enthaltenen Parser als Plugins bereitgestellt werden (aus Gründen der Dateigröße). Diese Plugins befinden sich unter https://unpkg.com/browse/prettier@%PRETTIER_VERSION%/plugins. Beachten Sie, dass das estree-Plugin geladen werden sollte, wenn JavaScript, TypeScript, Flow oder JSON formatiert werden.

Sie müssen die Plugins laden, die Sie verwenden möchten, und sie über die plugins-Option an prettier.format übergeben.

Siehe Beispiele unten.

Verwendung

Global

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

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

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

Worker

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

importScripts(
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.js",
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/graphql.js",
);

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

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

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

prettier.format(code, options)​

Verwendung​

Global​

ES-Module​

AMD​

CommonJS​

Worker​

Parser-Plugins für eingebetteten Code​