跳至主内容区

浏览器环境

非官方测试版翻译

本页面由 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: 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 替代 https://unpkg.com/prettier/standalone.js。

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 等打包工具使用。

Worker 环境​

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>