現在的 JavaScript 都會經過 Compress / Compile, 全部變成一排, 以節省傳輸成本.

於 Vim 編輯時, 遇到這種全部變成一排的, 可以靠此 外掛(Plugin) 來搞定, 這 外掛 縮排完後, 搞不好比原作者的縮排更漂亮. XD

• Vim JS 縮排格式最佳化 外掛: jsbeautify : a javascript source code formatter

JS Beautify 設定步驟

1. 於此 jsbeautify : a javascript source code formatter 下載 jsbeautify.vim
2. mkdir -p ~/.vim/plugin
3. mv jsbeautify.vim ~/.vim/plugin/
4. vim .vimrc # 設定 <leader> 鍵值 (若已經有設好 <leader> 鍵, 此步驟請跳過)
   

   let mapleader=”,”

JS Beautify 使用方式

1. vim filename_min.js
2. ,ff # 直接 ,ff 就可以顯示格式化縮排的結果
3. 註: <leader>ff

Vim <Leader> 操作設定

此部份與上述已經無關, 純紀錄 <leader> 的其它使用方式.

• map <Leader>h :echo “Hello world.”<CR>
• nmap <leader>h :tabprev<CR>
• nnoremap <silent> <leader>ff :call g:Jsbeautify()<cr>

線上的 JavaScript / JSON code formatter 工具

• Javascript unpacker and beautifier
• JSON Formatter (& Validator!)
• Beautify JavaScript from TextMate or CLI

JavaScript code 壓縮工具

• 使用 YUI Compressor 壓縮 CSS / JavaScript
• Google closure-compiler 專案 – 可於此下載 Source code
• Closure Compiler Service – Google JS Compiler 線上版
• Google Closure Compiler with PHP

Source