2016/04/24

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看看!

0 意見:

張貼留言