我自學幾年來使用的開發工具(上)
小弟不才，自學了多年結果還是沒有甚麼長進；也才做出了一些作品，實在是有點失敗。
但多少還是有一些自學上的心得，接下來我想要分享的是我自學的這幾年來所用到的工具還有資源：
編輯器：
Sublime Text似乎是目前前端以及網頁設計師所最常用的開發工具/編輯器，他的優點就是可擴充性非常的高，但也是歸功於他的Package Control的外掛數量，接下來我就來推薦幾款，我在SublimeText裡面所用的外掛。
SublimeText3外掛推薦：
- Emmet：這支外掛應該是Sublime裡面算最有名的外掛，它可以輸入很簡單的一些簡寫code，就可以Print出完整結構的程式碼非常的簡單易懂。
- Sass /CSS：讓Sass與CSS能夠有高亮的差異
- Autofilename：這個工具可以快速找出你編輯的檔案所在的資料夾同階層的文件與資料夾可以快速建立路徑的連結，十分的方便。
- HTML-CSS-JS Prettify：當你編輯程式碼如果覺得架構十分的混亂，可以安裝這支外掛，只要你按下了Ctrl+Shift+H，就可以將Html / CSS / JS的程式碼變得非常整齊且有秩序，看起來也非常容易辨認。(這支外掛需要搭配Node.js使用，使用前請先安裝或是LINK到Node.js)
- SidebarEnhancements：一支強化Sublime Sidebar的套件
- ColorHighlighter：能夠直接在編輯器上顯示該色碼的顏色
- LiveReload：搭配Chrome的plugin，只要存檔後修改後的頁面即可自動重新整理。
- SublimeCodeIntel：撰寫程式碼時會自動帶入一些基本的函數以及範例。
- Seti_UI theme(主題)：一款看起來酷炫，又是和專注於程式碼的主題。
更多Sublime相關的資訊，我在網路上還發現了一篇對岸網友寫的詳細解說，有興趣的朋友可以逛逛，保證受益良多！
相關資源：
二、Codepen
Codepen是一款線上即時編輯器，我主要拿來他來做一些簡單的單頁頁面，有時候要做假UI的呈現時，會用到這個線上編輯工具。它也同時結合了一些SublimeText 所有的Plugin，例如上面所提到的Emmet，即可以透過漸入簡單的簡碼+tab鍵後產出完整的code，也支援Sass/pug(原jade) 等等的預處理器的程式碼轉譯十分方便。以下是我常用它做的一些事情：
- 學習線上課程時當作筆記與嘗試用
- 需要快速開發單頁頁面做demo時
- 簡易的靜態網站
- 練習css的技巧
Codepen還有一個最棒的地方就是可以把自己寫好的code分享給其他人，方便在你有需要求助於人將code提供給他人review；或是要教學時，可以把自己寫好的code提供給他人參考當作model去模仿。
