ブラウザ · Prettier

Prettierのスタンドアロン版を使用して、ブラウザでPrettierを実行します。このバージョンはNode.jsに依存しません。コードのフォーマットのみを行い、設定ファイル、無視ファイル、CLIの使用、またはプラグインの自動読み込みはサポートしていません。

スタンドアロン版は、以下の形式で提供されます。

ESモジュール: standalone.mjs、バージョン3.0以降（バージョン2では、esm/standalone.mjs）
UMD: standalone.js、バージョン1.13以降

Prettierのpackage.jsonのbrowserフィールドは、standalone.jsを指しています。そのため、prettierモジュールをimportまたはrequireするだけでPrettierのAPIにアクセスでき、webpackまたはbrowserフィールドをサポートする他のバンドラーを使用している限り、コードはNodeとブラウザの両方と互換性を持つことができます。これは特にプラグインで便利です。

`prettier.format(code, options)`

必須オプション

parser (または filepath): Prettierが使用するパーサーを認識するために、これらのオプションのいずれかを指定する必要があります。
plugins: Node.jsベースのAPIのformat関数とは異なり、この関数はプラグインを自動的にロードしません。Prettierパッケージに含まれるすべてのパーサーはプラグインとして提供されるため（ファイルサイズの問題のため）、pluginsオプションが必要です。これらのプラグインは、https://unpkg.com/browse/prettier@3.3.3/plugins/にあるファイルです。JavaScript、TypeScript、Flow、またはJSONを出力する場合は、estreeプラグインを読み込む必要があることに注意してください。

使用するプラグインを読み込み、pluginsオプションを使用してprettier.formatに渡す必要があります。

例については、以下を参照してください。

使用方法

グローバル

<script src="https://unpkg.com/prettier@3.3.3/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.3.3/plugins/graphql.js"></script>
<script>
  (async () => {
    const formatted = await prettier.format("type Query { hello: String }", {
      parser: "graphql",
      plugins: prettierPlugins,
    });
  })();
</script>

Prettierの`package.json`にある`unpkg`フィールドは`standalone.js`を指しているため、`https://unpkg.com/prettier/standalone.js`の代わりに`https://unpkg.com/prettier`も使用できることに注意してください。

ESモジュール

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@3.3.3/standalone.mjs";
  import prettierPluginGraphql from "https://unpkg.com/prettier@3.3.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.3.3/standalone.js",
  "https://unpkg.com/prettier@3.3.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,
  });
})();

この構文はブラウザでは必ずしも機能するとは限りませんが、browserify、Rollup、webpack、または他のバンドラーでコードをバンドルする際に使用できます。

ワーカー

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

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

埋め込みコード用のパーサープラグイン

埋め込みコードをフォーマットする場合は、関連するプラグインもロードする必要があります。例えば

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@3.3.3/standalone.mjs";
  import prettierPluginBabel from "https://unpkg.com/prettier@3.3.3/plugins/babel.mjs";
  import prettierPluginEstree from "https://unpkg.com/prettier@3.3.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>

JavaScriptに埋め込まれたHTMLコードは、`html`パーサーがロードされていないため、フォーマットされません。正しい使用方法

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@3.3.3/standalone.mjs";
  import prettierPluginBabel from "https://unpkg.com/prettier@3.3.3/plugins/babel.mjs";
  import prettierPluginEstree from "https://unpkg.com/prettier@3.3.3/plugins/estree.mjs";
  import prettierPluginHtml from "https://unpkg.com/prettier@3.3.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>

prettier.format(code, options)