穩定版

編輯

瀏覽器

使用 Prettier 的獨立版本在瀏覽器中執行。此版本不依賴 Node.js。它只會格式化程式碼，不支援設定檔、忽略檔、CLI 用法或自動載入外掛。

獨立版本提供以下格式：

  • ES 模組：standalone.mjs，從 3.0 版開始（在 2 版中為 esm/standalone.mjs。）
  • UMD：standalone.js，從 1.13 版開始

Prettier 的 package.json 中的 browser 欄位 指向 standalone.js。這就是為什麼您可以直接 import 或 require prettier 模組來存取 Prettier 的 API，而且只要使用 webpack 或其他支援 browser 欄位的打包器，您的程式碼就可以與 Node 和瀏覽器相容。這對於外掛來說尤其方便。

prettier.format(code, options)

必要選項

  • parser (或 filepath)：必須指定其中一個選項，Prettier 才能知道要使用哪個解析器。

  • plugins：與基於 Node.js 的 API 中的 format 函式不同，此函式不會自動載入外掛。需要 plugins 選項，因為 Prettier 套件中包含的所有解析器都以插件的形式提供（基於檔案大小的原因）。這些外掛是位於 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` 也可以用來代替 `https://unpkg.com/prettier/standalone.js`。

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


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


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>
← API選項 →