2015年8月22日 星期六

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 這部分可以依照使用者習慣 



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


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


參考資料: