メインコンテンツへスキップ

ブラウザ

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

Prettierをブラウザで実行するにはスタンドアロン版を使用します。このバージョンはNode.jsに依存せず、コードのフォーマットのみを行い、設定ファイル・ignoreファイル・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）: 使用するパーサーを指定するため、いずれかのオプションが必要です。

  • plugins: Node.jsベースのAPIのformat関数とは異なり、この関数はプラグインを自動的に読み込みません。pluginsオプションが必要なのは、Prettierパッケージに含まれるすべてのパーサーが（ファイルサイズの理由で）プラグインとして提供されているためです。これらのプラグインはhttps://unpkg.com/browse/prettier@3.8.1/pluginsに配置されています。注意: JavaScript、TypeScript、Flow、JSONを整形する際はestreeプラグインを読み込む必要があります。

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

使用例は以下を参照してください。

使用方法​

グローバル​

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

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

この構文はブラウザで直接動作するわけではありませんが、browserify・Rollup・webpackなどのバンドラーでコードをバンドルする際に使用できます。

ワーカー​

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

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

埋め込みコードをフォーマットする場合、関連プラグインの読み込みも必要です。例：

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

JavaScriptに埋め込まれたHTMLコードはhtmlパーサーが読み込まれていないため整形されません。正しい使用方法：

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