稳定版

编辑

浏览器

使用 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，并且只要使用了支持 browser 字段的 webpack 或其他捆绑器，您的代码就可以与 Node 和浏览器兼容。这对于插件尤其方便。

prettier.format(code, options)

必需选项

  • parser（或 filepath）：必须指定这两个选项之一，以便 Prettier 知道使用哪个解析器。

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

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

请参阅下面的示例。

使用

全局

<script src="https://unpkg.com/[email protected]/standalone.js"></script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/standalone.mjs";
  import prettierPluginGraphql from "https://unpkg.com/[email protected]/plugins/graphql.mjs";

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

AMD

define([
  "https://unpkg.com/[email protected]/standalone.js",
  "https://unpkg.com/[email protected]/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

importScripts("https://unpkg.com/[email protected]/standalone.js");
importScripts("https://unpkg.com/[email protected]/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/[email protected]/standalone.mjs";
  import prettierPluginBabel from "https://unpkg.com/[email protected]/plugins/babel.mjs";
  import prettierPluginEstree from "https://unpkg.com/[email protected]/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/[email protected]/standalone.mjs";
  import prettierPluginBabel from "https://unpkg.com/[email protected]/plugins/babel.mjs";
  import prettierPluginEstree from "https://unpkg.com/[email protected]/plugins/estree.mjs";
  import prettierPluginHtml from "https://unpkg.com/[email protected]/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选项 →