Hoppa till huvudinnehållet

Webbläsare

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Kör Prettier i webbläsaren med dess fristående version. Denna version är inte beroende av Node.js. Den formaterar endast koden och har inte stöd för konfigurationsfiler, ignore-filer, CLI-användning eller automatisk inläsning av plugins.

Den fristående versionen finns som:

  • ES-moduler: standalone.mjs, från och med version 3.0 (I version 2: esm/standalone.mjs.)

  • UMD: standalone.js, från och med version 1.13

browser-fältet i Prettiers package.json pekar på standalone.js. Därför kan du enkelt importa eller requirea prettier-modulen för att komma åt Prettiers API, och din kod kan förbli kompatibel med både Node och webbläsaren så länge webpack eller annan bundler som stöder browser-fältet används. Detta är särskilt praktiskt för plugins.

prettier.format(code, options)​

Obligatoriska alternativ:

  • parser (eller filepath): Ett av dessa alternativ måste anges så att Prettier vet vilken parser som ska användas.

  • plugins: Till skillnad från funktionen format i det Node.js-baserade API:t laddar denna funktion inte plugins automatiskt. Alternativet plugins krävs eftersom alla parsers som ingår i Prettier-paketet levereras som plugins (av filstorleksskäl). Dessa plugins finns som filer på https://unpkg.com/browse/prettier@3.8.3/plugins. Observera att estree-plugin bör laddas när du skriver ut JavaScript, TypeScript, Flow eller JSON.

    Du måste ladda de plugins du tänker använda och skicka dem till prettier.format via alternativet plugins.

Se exempel nedan.

Användning​

Globalt​

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

Observera att unpkg-fältet i Prettiers package.json pekar på standalone.js, därför kan https://unpkg.com/prettier också användas istället för https://unpkg.com/prettier/standalone.js.

ES-moduler​

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

Denna syntax fungerar inte nödvändigtvis i webbläsaren, men kan användas när du bundlar koden med browserify, Rollup, webpack eller annan bundler.

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

Parserplugins för inbäddad kod​

Om du vill formatera inbäddad kod måste du också ladda relaterade plugins. Exempel:

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

Den inbäddade HTML-koden i JavaScript formateras inte eftersom html-parsern inte har laddats. Korrekt användning:

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