使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代碼

不少時候，咱們想要格式化HTML-CSS-JS代碼，網站上有不少實現此功能的小工具，固然，個人網站首頁也有。可是，若是咱們的代碼編輯器上面也有這樣的功能，那不是更加快速便捷？So，接下來，咱們看看Sublime Text 3是如何使用插件實現此功能的吧！

1、必要條件:

一、首先，你要有Sublime Text 3編輯器；
二、你本地要配置NodeJS環境（安裝方法能夠參考：Node.js學習筆記之一）；
三、你的Sublime Text 3編輯器要安裝HTML-CSS-JS Prettify插件（安裝方法能夠參考：Sublime經常使用插件總結）。

 

2、安裝過程：

一、咱們打開Sublime Text 3編輯器，安裝HTML-CSS-JS Prettify插件。

a)在Sublime Text 3中，按下Ctrl+Shift+P調出命令面板;
b)輸入install 調出 Install Package 選項並回車;
c)輸入pretty，並在列表中選擇HTML-CSS-JS Prettify後回車便可安裝。

 

二、查看本地安裝的NodeJS配置環境路徑（在dos命令下，輸入where node並回車）。

 

 

三、在編輯器的任意一個html/js/css文件中，右擊，出現以下圖所示，選擇Set Plugin Options。

 

 

四、將上述步驟2中的NodeJS本地路徑保存到步驟3中打開的文件中，以下圖所示。

 

 

五、成功安裝HTML-CSS-JS Prettify插件。

3、作個DEMO：

一、原始HTML模板，混亂不堪。

 

 

二、右擊，選擇Prettify Code。

 

 

三、格式化結果。