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

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>