前端开发人员经常会遇到代码混乱不堪、难以维护的情况。代码美化工具可以帮助我们将代码格式化，使其更易于阅读和理解。在此，我们将介绍一种优秀的 npm 包 @wmhilton/beautify（以下简称“beautify”）的使用教程，帮助大家更好地处理前端代码格式化问题。
一、beautify 是什么？
@wmhilton/beautify 是一个代码格式化工具，可以将 JavaScript、JSON、CSS、HTML 等代码文件格式化，将其转化为易于阅读、格式良好的代码形式。
二、beautify 安装
使用 npm 安装 beautify，只需要在命令行中输入以下指令：
npm install -g @wmhilton/beautify
安装完成后，您就可以在命令行中使用 beautify 命令。
三、beautify 使用示例
1. 格式化 JavaScript 代码
假设我们有这样一段混乱的 JavaScript 代码：
var a={firstName:"John",lastName:"Doe",age:25};var b={firstName:"Mary",lastName:"Smith",age:32};
function myFunction(a,b){return a.age-b.age}
console.log(myFunction(a,b));我们可以使用以下命令，将其格式化：
beautify -r -s 2 -f myfile.js
其中，“-r”表示在原文件中修改， “-s 2” 表示使用2个空格进行缩进，“-f”指定输入文件名。执行命令后，我们得到的结果为：
-- -------------------- ---- ------- --- - - - ---------- ------- --------- ------ ---- -- -- --- - - - ---------- ------- --------- -------- ---- -- -- -------- ------------- -- - ------ ----- - ----- - ------------------------- ----
看起来更加清晰易读了吧？
2. 格式化 CSS 代码
我们还可以使用 beautify 来格式化 CSS 代码。假设我们有这样一段 CSS 代码：
.container{display:flex;justify-content:center;align-items:center}
.container h1{font-size:16px;color:#333}
.container p{font-size:14px;color:#666;line-height:1.5}我们可以使用以下命令，将其格式化：
beautify -r -s 2 -f myfile.css
执行命令后，我们得到的结果为：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------ - ---------- -- - ---------- ----- ------ ---- - ---------- - - ---------- ----- ------ ----- ------------ --- -
3. 格式化 HTML 代码
最后，我们还可以使用 beautify 来格式化 HTML 代码。假设我们有这样一段 HTML 代码：
<!DOCTYPE html><html><head><title>My Web</title><link rel="stylesheet" href="style.css"></head><body><h1>My Web</h1><p>Welcome to my web!</p></body></html>
我们可以使用以下命令，将其格式化：
beautify -r -s 2 -f myfile.html
执行命令后，我们得到的结果为：
-- -------------------- ---- -------
--------- -----
------
------
--------- -----------
----- ---------------- -----------------
-------
------
------ --------
---------- -- -- --------
-------
-------四、beautify 配置项
beautify 还提供了一些常用的配置选项，可以帮助我们更加灵活地使用。以下是一些常见的配置选项：
-r：指定是否在原文件中修改代码（默认为 false）。-s <int>：指定缩进的空格数（默认为 4）。-f <string>：指定需要格式化的文件名。-p：指定将代码格式化为 prettier 格式（默认为 false）。--help：获取帮助信息。
五、总结
在本文中，我们介绍了前端开发中常用的代码美化工具之一，即 @wmhilton/beautify。我们详细讲述了该工具的安装、使用方法和常用配置选项。希望这篇文章对您学习和使用 beautify 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626e81e8991b448dfb73