stable

浏览器

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

¥Run Prettier in the browser using its standalone version. This version doesn’t depend on Node.js. It only formats the code and has no support for config files, ignore files, CLI usage, or automatic loading of plugins.

独立版本如下：

¥The standalone version comes as:

  • ES 模块：standalone.mjs，从版本 3.0 开始（在版本 2 中，esm/standalone.mjs。）

    ¥ES modules: standalone.mjs, starting in version 3.0 (In version 2, esm/standalone.mjs.)

  • UMD：standalone.js，1.13 版本开始

    ¥UMD: standalone.js, starting in version 1.13

Prettier 的 package.json 中的 browser 字段 指向 standalone.js。这就是为什么你可以只 import 或 require prettier 模块来访问 Prettier 的 API，只要使用 webpack 或其他支持 browser 字段的打包器，你的代码就可以与 Node 和浏览器保持兼容。这对 插件 特别方便。

¥The browser field in Prettier’s package.json points to standalone.js. That’s why you can just import or require the prettier module to access Prettier’s API, and your code can stay compatible with both Node and the browser as long as webpack or another bundler that supports the browser field is used. This is especially convenient for plugins.

prettier.format(code, options)

必需的选项：

¥Required options:

  • parser（或 filepath）：必须为 Prettier 指定这些选项之一才能知道要使用哪个解析器。

    ¥parser (or filepath): One of these options has to be specified for Prettier to know which parser to use.

  • plugins：与 基于 Node.js 的 API 中的 format 功能不同，此功能不会自动加载插件。plugins 选项是必需的，因为 Prettier 包中包含的所有解析器都是作为插件提供的（出于文件大小的原因）。这些插件是 https://unpkg.com/browse/prettier@3.3.2/plugins 中的文件。请注意，打印 JavaScript、TypeScript、Flow 或 JSON 时应加载 estree 插件。

    ¥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.3.2/plugins. Note that estree plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.

    你需要加载你将要使用的那些，并使用 plugins 选项将它们传递给 prettier.format。

    ¥You need to load the ones that you’re going to use and pass them to prettier.format using the plugins option.

有关示例，请参见下文。

¥See below for examples.

用法

¥Usage

全局的

¥Global

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

¥Note that the unpkg field in Prettier’s package.json points to standalone.js, that’s why https://unpkg.com/prettier can also be used instead of https://unpkg.com/prettier/standalone.js.

ES 模块

¥ES Modules

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

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

AMD

define([
  "https://unpkg.com/prettier@3.3.2/standalone.js",
  "https://unpkg.com/prettier@3.3.2/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 或其他打包器打包代码时使用。

¥This syntax doesn’t necessarily work in the browser, but it can be used when bundling the code with browserify, Rollup, webpack, or another bundler.

工作线程

¥Worker

importScripts("https://unpkg.com/prettier@3.3.2/standalone.js");
importScripts("https://unpkg.com/prettier@3.3.2/plugins/graphql.js");

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

嵌入式代码的解析器插件

¥Parser plugins for embedded code

如果要格式化 嵌入代码，还需要加载相关插件。例如：

¥If you want to format embedded code, you need to load related plugins too. For example:

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@3.3.2/standalone.mjs";
  import prettierPluginBabel from "https://unpkg.com/prettier@3.3.2/plugins/babel.mjs";
  import prettierPluginEstree from "https://unpkg.com/prettier@3.3.2/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 解析器。正确用法：

¥The HTML code embedded in JavaScript stays unformatted because the html parser hasn’t been loaded. Correct usage:

<script type="module">
  import * as prettier from "https://unpkg.com/prettier@3.3.2/standalone.mjs";
  import prettierPluginBabel from "https://unpkg.com/prettier@3.3.2/plugins/babel.mjs";
  import prettierPluginEstree from "https://unpkg.com/prettier@3.3.2/plugins/estree.mjs";
  import prettierPluginHtml from "https://unpkg.com/prettier@3.3.2/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>
← APIOptions →