当我们在编写前端代码时，代码的格式化与风格让代码可读性更加高效。然而，在我们编写大量的代码时，手动格式化代码就会显得极其繁琐和费时。这时，我们需要 prettify-js 这个 npm 包来帮助我们自动化格式化代码。
什么是 prettify-js？
prettify-js 是一个用于格式化 JavaScript、HTML 和 CSS 代码的 npm 包，它可以处理代码的缩进、空格、换行符等，使代码的格式规范易读。它是通过构建 AST 并解析它来工作的。
如何使用 prettify-js？
在您的项目中使用 prettify-js 是非常简单的。只需安装它，然后使用它进行格式化即可。
1.安装 prettify-js
您可以通过 npm 在您的项目中安装 prettify-js。
npm install prettify-js --save-dev
2.在您的项目中使用 prettify-js
-- -------------------- ---- ------- ----- -------- - ----------------------- ----- ------- - - -- --- -- -- -------- ----- ---- - --------- ----- - ------------------- --------- --- ------- ----- ------------- - -------------- --------- ---------------------------
在代码中使用 prettify 函数将您的代码传递给它来进行格式化，并传递options对象，它将应用于您的代码以指定格式化选项。例如：
const options = {
indent_size: 2,
indent_char: " ",
unformatted: ["a", "span"],
wrap_line_length: 80
};由于 prettify-js 通过解析 AST 来格式化代码，因此，您的代码始终得以保留。这就使 prettify-js 成为一个非常强大的工具，因为它可以自动格式化代码而不必手动重新调整格式。
配置选项
为了让您的代码格式化得更好，prettify-js 提供了一些选项，您可以根据自己的需要来设置这些选项。下面是一些您可以配置的选项。
indent_size
设置缩进空格的数量。例如，如果您将其设置为 2，则将在每个级别的缩进中使用两个空格。
const options = {
indent_size: 2,
};indent_char
设置用于缩进的字符。例如，如果您想使用制表符而不是空格，则可以将其设置为制表符。
const options = {
indent_char: "\t",
};unformatted
指定要保持不格式化的元素，例如，a 标签或 span 标签。
const options = {
unformatted: ["a", "span"],
};wrap_line_length
指定要在哪个行长度处断开。例如，如果您希望您的代码在每 80 个字符处断开，可以将其设置为 80。
const options = {
wrap_line_length: 80,
};结论
prettify-js 是一个强大的 npm 包，可以自动格式化您的 JavaScript、HTML 和 CSS 代码，使其易于解读。它的配置选项使您可以轻松地设置缩进、字符、未格式化元素和行长度。使代码的格式规范易读。我们强烈建议您将其用于您的项目中，以加快代码的编写速度并使其可读性更强。
示例代码
-- -------------------- ---- -------
----- -------- - -----------------------
----- ------- - -
------------ --
------------ - --
------------ ----- --------
----------------- --
--
----- ---- - -
--------- -----
------
------
--------- -------------
----- ----------------
----- --------------- ---------------------------- -----------------
----- ---------------- -----------------
-------
------
---------- -----------
-------
-------
--
----- ------------- - -------------- ---------
---------------------------输出结果：
-- -------------------- ---- -------
--------- -----
------
------
--------- -------------
----- ----------------
----- --------------- ---------------------------- -----------------
----- ---------------- -----------------
-------
------
---------- -----------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e381e8991b448e0706