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 format-funktionen i det Node.js-baserade API:et 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 på https://unpkg.com/browse/prettier@3.8.1/plugins. Observera att estree-plugin bör laddas när du formaterar JavaScript, TypeScript, Flow eller JSON.

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

Se exempel nedan.

Användning​

Globalt​

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

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

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

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

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