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

ブラウザ

非公式ベータ版翻訳

このページは 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: 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.

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

使用方法​

グローバル​

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

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

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

ワーカー​

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

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

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

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

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

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