2013年9月1日 星期日

[教學] HTMLPrettify 使用方式 - sublime text 2

https://github.com/victorporof/Sublime-HTMLPrettify

介紹 sublime html Prettify 工具,藉由鐵神看到的分享,這邊說明一下如何設定,讓自己之後可以快速回顧,知道使用的方法。

Prepare

  • sublime text 2 / 3
  • sublime package installer
  • node.js

install

打開 Sublime text 2 / 3



Mac

Cmd + Shift + p -> install

Windwos

Ctrl + Shift + p

Imgur
選擇安裝,HTMLPrettify,會進行檔案下載安裝的動作,以上安裝完成。

Usage

使用方法十分簡單,當我們遇到非常混亂的 HTML code 可以透過這個工具,快速的將版面重新排整齊,使用方式只要,
Cmd + shift + p
Ctrl + shift + p

輸入 htmlprettify 選擇項目如下圖,就會自動幫你排整齊了。

Imgur

Setting

當然在預設的設定上可能還是有些地方不符合自己的需求,HTMLPrettify 提供了兩種設定方式,一種是 Global 設定方法,另外一種是在每一個檔案的資料夾底下多新增
.jsbeautifyrc

檔案格式裡面可以設定許多格式,相關資料可以參考,
https://github.com/victorporof/Sublime-HTMLPrettify

另外 Global 的設定方法,可以使用
Cmd + shift + p
Ctrl + shift + p

輸入 htmlprettify,選擇 preferenc ,進行調整,這邊我就調整了整個 indent size 選項部分.
Imgur

結語

這個 plungin 對於 web 開發者來說算是一個方便的好工具,希望大家可以多多關注這些開源資訊,讓自己的工作環境可以做到,又懶,又快速。

沒有留言:

張貼留言

Facebook