[Sublime Text] 使用 HTML-CSS-JS Prettify 套件來美化 JavaScript 程式的編排

[Sublime Text] 使用 HTML-CSS-JS Prettify 套件來美化 JavaScript 程式的編排

從網路上抓現成的 JavaScript 範例程式,有個麻煩就是程式碼對齊的問題,

最常見的是空白數目跟自己常用的 4 個空白不一樣,

或是左右括號的位置不一樣 (現在比較習慣 {} 是各自一行的寫法)~

 

找了一下,Sublime Text 裡有個 HTML-CSS-JS Prettify 的套件,

可以很方便的把 JavaScript 程式重新依照想要的格式編排,

像我喜歡 {} 各自一行也可以設定,真的很不錯~

 

1. 安裝 HTML-CSS-JS Prettify 套件

一樣用 Package Conrol 搜尋一下 HTML-CSS-JS Prettify 安裝~

Screen Shot 2015-01-14 at 上午1.07.00  

 

2. 設定 HTML-CSS-JS Prettify

到 Sublime Text > Tools > Command Palette,

找到 HTMLPrettify: Set Prettify Preferences 先作一下設定~

Screen Shot 2015-01-14 at 上午1.08.26  

 

這會開啟 .jsbeautifyrc 設定檔~

(這設計不錯,之前都要到處找套件的設定檔在哪)

我先把 brace_style 從預設的 collapse 改成 expand,

這樣子 {} 就會是分別的一行:

  "js": {
"brace_style": "expand", // [collapse|expand|end-expand|none]
}

 

用一個 JavaScript 程式測試一下吧:

var page = require('webpage').create();
page.onConsoleMessage = function(msg) {
console.log(msg);
};
page.open('https://www.pixnet.net/', function(status) {
if (status != 'success') {
console.log('Unable to access network');
} else {
console.log("hi");
page.includeJs('https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', function() {
console.log("hi in page");
});
console.log("after include js");
}
phantom.exit();
});

 

到 Sublime Text > Tools > Command Palette,找到 HTMLPrettify 執行:

Screen Shot 2015-01-14 at 上午1.14.59  

 

可以看到 JavaScript 程式已經被重新編排好了,看起來舒服多囉 ^^/ 

var page = require('webpage').create();
page.onConsoleMessage = function(msg)
{
console.log(msg);
};
page.open('https://www.pixnet.net/', function(status)
{
if (status != 'success')
{
console.log('Unable to access network');
}
else
{
console.log("hi");
page.includeJs('https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', function()
{
console.log("hi in page");
});
console.log("after include js");
}
phantom.exit();
});

 

(本頁面已被瀏覽過 1,271 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料