那麼進到這領域，對於新手來講，還是要有一個開發環境，那我選擇的是Sublime Text3這個編輯器...
廢話不多說 接下來進入正題 開始來介紹基本安裝、設定、使用教學
首先安裝的部分，開發者只要按照自己電腦並且挑選對應的作業系統安裝即可 就不多談了
裝好之後，就要安裝管理許多套件的管理員Package Control 這可以讓Sublime變得更好用
安裝步驟如下:
Step1:開啟Sublime Text3主程式，點擊View/Show Console或是快捷鍵Ctrl+`叫出主控台
Step2:直接複製貼上Package Control網頁上提供的指令在主控台，直接按Enter就執行，就安裝完畢了，之後按ESC鍵離開主控台
Step3:發現Package Control選項出現選單裡 點擊Preferences/Package Control
到此Package Control已經安裝完畢，接下來就來用看看它到底有多好用
那在開啟Package Control之前，我先用一張圖來介紹它的常用指令
這是截圖於某位前端高手的PPT，想了解的可以看參考資料
開啟Package Control或按快捷鍵Ctrl+Shift+P，主畫面如下:
用Package Control安裝套件
按下Install Package或是輸入inst 進到如下圖的畫面，在輸入框中輸入套件名稱按Enter就開始安裝套件
強烈建議安裝的套件清單:
- Emmet(建置原始碼超快)
- AutoFileName(自動抓取檔案路徑)
- ColorPicker(調色盤)
- jQuery(前端開發必用的函式庫)
- JS Snippets(自動產生常用的JavaScript 片段)
- LiveReload(瀏覽器自動重新整理)
- EJS(定義EJS語法)
- Sass(定義Sass語法)
試用套件:
使用Emmet快速產生HTML5網頁檔
!+Tab 就完成了!!!
使用ColorPicker挑選顏色:
按下快捷鍵Ctrl+Shift+C 跑出調色盤
其餘的套件 留待開發者自己去試就明白囉...
Sublime Text3 並不會自動排版 如果程式寫的太亂很難debug怎麼辦 別擔心
下面教你如何做到自動排版...
程式碼自動排版:
Step1:輸入關鍵字 auto format sublime text
Step2:第一個連結就是了
點擊Preferences/Key Bindings - User 叫出空白的設定檔出來
複製貼上網頁裡這行{ "keys": ["ctrl+shift+r"], "command": "reindent"}指令
按Ctrl+S存檔
注意:快捷鍵改為f12 這部分可以依照使用者習慣
到這裡友善的開發環境就建置完成了 ...
如果大家有好用的套件或是開發建議也可以提供哦 ^^
參考資料:
