Sublime Text個人常用套件 | 前端

在網頁設計的這條不歸路上，最早接觸的編輯軟體應該跟大多數七年級生一樣都是Frontpage，想當初我們還是從IE內建的版本開始使用，後來則出現了Dreamweaver，隨著Frontpage改名(現在也消失了?)後，也就變成Dreamweaver獨佔天下好一陣子。

近幾年，純文字編輯器又開始夯了，在之前的公司時，一直聽到F2E介紹Sublime Text，當時只覺得這一團黑的鬼東西誰要用呀，後來才知道這東西其實超！好！用！！！

原本我都是用Sublime Text 2，之前也已經出Sublime Text 3好一陣子，新增一些還不錯的地方想說來更新一下，但套件不能夠自動繼承過去(有些甚至不相容)，剛好前陣子Macbook Air重灌Yosemite，就順便把LIST寫一寫，以防之後又忘記自己裝過那些XDDD


首先，要先裝Package Control
import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
這每次改版都不太一樣，還是到官網抓最新版code。

接著使用Package Control安裝外掛(快速鍵ctrl+shift+p)，再輸入ip選擇install package，再來就可以安裝下列外掛。

Emmet
快速提示的好幫手

HTML5
補齊HTML5的提示

HTML-CSS-JS Prettify
格式化（美化）html、css、js

Auto​File​Name
輸入URL或路徑時，自動顯示建議路徑

Bracket Highlighter
將HTML前後對應的標籤Highlight出來

ColorPicker
色票選色器

livereload
不用拼命F5了!!

ConvertToUTF8
解決SublimeText開啟big5時會亂碼的問題

Color Highlighter
當點選色碼時顯示色票顏色

sublimelinter-html-tidy
終於找到可以像dreamweaver幫忙自動對齊的！但要記得裝node.js

Side​Bar​Enhancements
增加sublime側邊欄檔案的右鍵選單功能，要移動或修改都比較方便

 LoremIpsum
 假字系統，打完lorem後按TAB就可產生假字！可用lorem20的方式來限制產生的字數

ChineseLoremIpsum
中文假字系統，輸入ctlorem再按ALT＋C就可產生（跟LoremIpsum不太一樣），也可像ctlorem20的方式來限制字數

Bootstrap 3 snippets
快速產生BS3組件

Bootstrap 3 autocomplete
快速產生BS3的CSS

FakeImg.pl Image Placeholder Snippet
產生假圖用，輸入fakeimg再tab就會產生，可再修改大小及顏色





主題部份，目前習慣使用Spacegray，之前也有看過幾套不錯的，像是AGOLA也不錯！側邊欄也都有美化過，不過其它沒注意的就忘了他叫啥XDDDD，想找找其它不錯的主題也可以上COLORSUBLIME看看！