浏览器环境

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

使用 Prettier 的独立版本在浏览器中运行。此版本不依赖 Node.js，仅提供代码格式化功能，不支持配置文件、忽略文件、CLI 使用或自动加载插件。

独立版本提供两种格式：

• ES 模块：standalone.mjs（从 3.0 版本开始提供，2.x 版本路径为 esm/standalone.mjs）

• UMD 格式：standalone.js（从 1.13 版本开始提供）

Prettier 的 package.json 中 browser 字段指向 standalone.js。因此只需通过 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@%PRETTIER_VERSION%/plugins。注意：当格式化 JavaScript、TypeScript、Flow 或 JSON 时，应加载 estree 插件。

  你需要加载将要使用的插件，并通过 plugins 选项传递给 prettier.format。

具体示例见下文。

使用方式

全局引入

<script src="https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.js"></script>
<script src="https://unpkg.com/prettier@%PRETTIER_VERSION%/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。

ES 模块

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.mjs";
  import * as prettierPluginGraphql from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/graphql.mjs";

  const formatted = await prettier.format("type Query { hello: String }", {
    parser: "graphql",
    plugins: [prettierPluginGraphql],
  });
</script>

AMD 规范

define([
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.js",
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/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 prettierPluginGraphql = require("prettier/plugins/graphql");

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

此语法在浏览器中不一定直接可用，但可通过 browserify、Rollup、webpack 等打包工具使用。

Worker 环境

Module worker

import * as prettier from "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.mjs";
import * as prettierPluginGraphql from "https://unpkg.com/prettier@%PRETTIER_VERSION%1/plugins/graphql.mjs";

const formatted = await prettier.format("type Query { hello: String }", {
  parser: "graphql",
  plugins: [prettierPluginGraphql],
});

Classic worker

importScripts(
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/standalone.js",
  "https://unpkg.com/prettier@%PRETTIER_VERSION%/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@%PRETTIER_VERSION%/standalone.mjs";
  import * as prettierPluginBabel from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/babel.mjs";
  import * as prettierPluginEstree from "https://unpkg.com/prettier@%PRETTIER_VERSION%/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@%PRETTIER_VERSION%/standalone.mjs";
  import * as prettierPluginBabel from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/babel.mjs";
  import * as prettierPluginEstree from "https://unpkg.com/prettier@%PRETTIER_VERSION%/plugins/estree.mjs";
  import * as prettierPluginHtml from "https://unpkg.com/prettier@%PRETTIER_VERSION%/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>