使用Sublime Text 3的HTML-CSS-JS Prettify外掛程式格式化代碼

標籤：node.js   網站   node   htm   如何   sublime   tar   查看   配置   

很多時候，我們想要格式化HTML-CSS-JS代碼，網站上有很多實現此功能的小工具，當然，我的網站首頁也有。但是，如果我們的代碼編輯器上面也有這樣的功能，那不是更加快速便捷？So，接下來，我們看看Sublime Text 3是如何使用外掛程式實現此功能的吧！

一、必要條件:

1、首先，你要有Sublime Text 3編輯器；
2、你本地要配置NodeJS環境（安裝方法可以參考：Node.js學習筆記之一）；
3、你的Sublime Text 3編輯器要安裝HTML-CSS-JS Prettify外掛程式（安裝方法可以參考：Sublime常用外掛程式總結）。

 

二、安裝過程：

1、我們開啟Sublime Text 3編輯器，安裝HTML-CSS-JS Prettify外掛程式。

a)在Sublime Text 3中，按下Ctrl+Shift+P調出命令選擇區;
b)輸入install 調出 Install Package 選項並斷行符號;
c)輸入pretty，並在列表中選擇HTML-CSS-JS Prettify後斷行符號即可安裝。

 

2、查看本地安裝的NodeJS配置環境路徑（在dos命令下，輸入where node並斷行符號）。

 

 

3、在編輯器的任意一個html/js/css檔案中，右擊，出現如所示，選擇Set Plugin Options。

 

 

4、將上述步驟2中的NodeJS本地路徑儲存到步驟3中開啟的檔案中，如所示。

 

 

5、成功安裝HTML-CSS-JS Prettify外掛程式。

三、做個DEMO：

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

 

 

2、右擊，選擇Prettify Code。

 

 

3、格式化結果。

 

使用Sublime Text 3的HTML-CSS-JS Prettify外掛程式格式化代碼