Sublime Text3 開發環境快速建置

近幾年來，網站開發變得熱門，且相關的工作需求和職缺也越來越多，而我也想了解網站是如何運作以及建置，畢竟現在大家都是使用瀏覽器連上網站完成各自不同的需求 所以我想玩看看網站開發這領域。

那麼進到這領域，對於新手來講，還是要有一個開發環境，那我選擇的是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就開始安裝套件

強烈建議安裝的套件清單:

1. Emmet(建置原始碼超快)
2. AutoFileName(自動抓取檔案路徑)
3. ColorPicker(調色盤)
4. jQuery(前端開發必用的函式庫)
5. JS Snippets(自動產生常用的JavaScript 片段)
6. LiveReload(瀏覽器自動重新整理)
7. EJS(定義EJS語法)
8. Sass(定義Sass語法)

試用套件:

使用Emmet快速產生HTML5網頁檔

!+Tab 就完成了!!!

使用ColorPicker挑選顏色:

按下快捷鍵Ctrl+Shift+C 跑出調色盤

其餘的套件 留待開發者自己去試就明白囉...

Sublime Text3 並不會自動排版 如果程式寫的太亂很難debug怎麼辦 別擔心

下面教你如何做到自動排版...

程式碼自動排版:

Step1:輸入關鍵字  auto format sublime text

Step2:第一個連結就是了

Step3:

點擊Preferences/Key Bindings - User 叫出空白的設定檔出來 

複製貼上網頁裡這行{ "keys": ["ctrl+shift+r"], "command": "reindent"}指令

按Ctrl+S存檔

注意:快捷鍵改為f12 這部分可以依照使用者習慣 

 到這裡友善的開發環境就建置完成了 ...

如果大家有好用的套件或是開發建議也可以提供哦 ^^

參考資料:

1.Sublime text極速應用教學

2.Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學

3.How do I reformat HTML code using Sublime Text 2?