要開始動手寫程式前，第一件事情就是要有一個用的順手的開發環境，這篇文章將會針對幾個很多人使用的工具。我對於工具與框架的選擇理由很簡單，就是選擇社群上最多人使用的，目的就是遇到問題時，比較容易找到人可以詢問，避免踩到解不開的地雷，讓專案空轉好幾天。

Sublime Text

開始寫程式首先就是要有一個順手的文字編輯器，在這邊要介紹的是 Sublime Text ，在前端開發上的市佔率非常高也有人在經營粉絲頁討論。不只是前端開發，許多其他語言的開發者也會選擇 Sublime Text 作為編輯器。

多重選擇功能

Sublime 除了可以做到取代的基本功能，還可以利用 Command + D (Ctrl + D) 的快捷鍵，依此把想修改的東西選取起來，就有多重的指標可以一次輸入多筆資料。

另外可以多重輸入的方法，可以按著 option (alt) 利用滑鼠拖曳，可以一次選取多欄的效果。

無限擴充擴充功能的 Package Control

Sublime Text 為什麼會讓那麼多人喜歡，很大的一個原因是有可以擴充功能的 Package Control ，甚至有些初學者以為那是 Sublime Text 的內建功能，Package Control 是由 wbond 所製作的，安裝的方法是在安裝好 Sublime Text 之後開啓，接著要開啟 console 輸入框（ctrl+`），在這邊要確認你安裝的版本是 Sublime Text 2 還是 Sublime Text 3，

Sublime Text 3 輸入

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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://sublime.wbond.net/' + 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)

如果是 Sublime Text 2 則輸入

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

安裝完之後重新啟動 Sublime ，之後只要利用快捷鍵 Command + Shift + P ( Ctrl + Shift + P )，鍵入 Package Control，就可以使用 Install package 來安裝

在這邊推薦兩個必裝的 package

Emmet (Zen Coding)

Emmet 可以快速產生 HTML 標籤，甚至產生頁面的初始樣板只要輸入 ! 再按 tab 就可以產生。

Bracket Highlighter

Bracket Highlighter 的功能是幫你標記好 HTML 的開頭與結尾標籤，當 HTML 內容一多，這是個很重要的功能，這也是 Adobe Bracket 的內建功能，使用 Package Control 就可以讓 sublime 想有相同功能。

在教學網站 Tut+ 上有提供免費的 Sublime Text 2 的教學，想要學習 Sublime 的朋友可以去看看。