1.3 安装及使用HTML-CSS-JS Prettify插件

HTML-CSS-JS Prettify是一款对HTML、CSS和JavaScript实施格式化的插件，该插件依赖于Node.js。在编写代码时，总会或多或少地输入空格，或者缩进没那么整齐等，导致代码看起来不舒服，这时就需要对代码进行格式化，让代码看起来更加优美。

1.3.1 安装HTML-CSS-JS Prettify插件

【演练1.10】安装HTML-CSS-JS Prettify插件。

（1）选择“Preferences”→“Package Control”命令，输入“install”，选择“Install Package”选项，如图1-33所示。

图1-33 选择“Install Package”选项

（2）输入“htmlpre”后选择“HTML-CSS-JS Prettify”插件，按“Enter”键，等待安装结束，如图1-34所示。

图1-34 输入“htmlpre”

1.3.2 安装Node.js

由于HTML-CSS-JS Prettify插件依赖于Node.js，所以在使用HTML-CSS-JS Prettify插件之前，还要安装Node.js。

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，这里只需安装好Node.js以保证HTML-CSS-JS Prettify插件正常运行即可。

【演练1.11】安装Node.js。

（1）如图1-35所示，在相应网站（如搜索“Node.js中文网”）选择所需版本后下载。编者这里选择的是Windows系统64位版本。

图1-35 下载Node.js

（2）下载完成后单击“运行”按钮开始安装，如图1-36所示。

图1-36 运行安装程序

（3）显示欢迎向导，单击“Next”按钮，如图1-37所示。

（4）勾选“I accept the terms in the License Agreement”复选框，单击“Next”按钮，如图1-38所示。

（5）选择安装文件夹（此处需要记住自己的安装文件夹路径），单击“Next”按钮，如图1-39所示。

图1-37 欢迎向导

图1-38 勾选“I accept the terms in the License Agreement”复选框

图1-39 选择安装文件夹

（6）单击“Next”按钮，如图1-40所示。

图1-40 单击“Next”按钮

（7）单击“Install”按钮开始安装，如图1-41所示。

图1-41 单击“Install”按钮开始安装

（8）安装进行中，请等待片刻，如图1-42所示。

（9）单击“Finish”按钮完成安装，如图1-43所示。

图1-42 正在安装

图1-43 单击“Finish”按钮完成安装

1.3.3 配置Node.js

【演练1.12】配置Node.js。

（1）选择“Preferences”→“Package Settings”→“HTML/CSS/JS Prettify”→“Set`node`Path”命令，如图1-44所示。

（2）如图1-45所示，查看选中部分代码（Windows版本只关心该选项）路径是否和读者安装Node.js时的路径一致。如果不一样，则改为安装Node.js时选择的路径。

【注意】路径中的斜杠为“/”。

图1-44 选择“Set`node`Path”命令

图1-45 检查路径

1.3.4 使用HTML-CSS-JS Prettify插件

【演练1.13】使用HTML-CSS-JS Prettify插件。

（1）启动Sublime Text，如图1-46所示，选择“File”→“Open File”命令打开文件，选择路径和文件，这里选择的是【演练1.4】中创建的“1.04.html”。

（2）打乱一下文件的排版，使其变得不整齐，如图1-47所示。

（3）格式化代码。如图1-48所示，在编辑器空白位置右击，选择“HTML/CSS/JS Prettify”→“Prettify Code”命令（或者按“Ctrl+Shift+H”组合键），将会格式化代码。注意观察格式化后代码的缩进对齐格式。

图1-46 选择命令

图1-47 自行打乱文件的排版

图1-48 格式化代码

【说明】这里代码不多，基本是整齐的，似乎格式化意义不大，但如果代码多了，此功能非常有用。

（4）解决可能的问题，如果出现图1-49所示的错误提示，请检查Node.js的安装和配置是否正确。

图1-49 提示错误