I'm Kero

Planning, Fast and Slow.

值得分享的網頁前端開發工具

之前沒整理過一套比較系統的,別人問時就東一個西一個的說,想想也是該生出這篇文的時候了。

1. Sublime Text 3 - 好用好學的編輯器

從 2 一直用到現在感覺非常順手的編輯器,不像 vim 那樣難學習,又不像 Notepad ++ 那麼陽春,有的東西都恰到好處,尤其我很中意它的配色,習慣了完全無法再盯著白底螢幕看。

這款如果搭配 Emmet 套件,效率可衝到驚人的地步。

2. Emmet - 高效率開發神器

從 Zen-Coding 改名而來的 auto-complete 加強套件,可大大簡化 HTML 建構過程,雖然我也是最近才用,因為它的語法滿像 CSS 的,幾乎不需要適應期,如果你不是 config 狂人,這個足夠好用。

How to install Zen Coding with Sublime Text 3

  1. 安裝 Package Manager
  2. 打開 Sublime Text 按下 Command(Ctrl) + Shift + P
  3. 輸入 "install" 然後 Enter
  4. 輸入 "Emmet" 然後 Enter ... 完成安裝!

接著是幾篇講解使用 Emmet 的方法:

3. Prepos / CodeKit - 即時編譯器兼網頁重整幫手

這兩個工具應該不用多介紹了吧,個人是比較傾向用 Mac 上的 CodeKit,兩者的差異介紹可見這篇文章

4. Animate.css - 易於整合的 CSS 動畫腳本

可以運用 jQuery 的 addClass 來為元素增加特效,好懂好用好維護。

5. Redactor WYSIWYG html editor - 強大的富編輯器

6. jQuery Boilerplate - jQuery 插件快速開發工具