2012年2月19日 星期日

Sublime Text 2 - 好用的前端程式編輯器 Part.2 安裝與簡單使用說明


上次已經簡單的介紹了「Sublime Text 2」是個什麼樣的工具了,而這一篇將會介紹如何安裝,除了安裝軟體的本身之外,也會簡單的說明幾個使用上的技巧。

內容概要:
  1. 安裝Sublime Text 2
  2. 使用Sublime Text 2的命令面板(Command Palette)
  3. 使用Console命令列
  4. 開啟/關閉側邊欄(Sider Bar)
  5. 文件切換
  6. 更換編輯顯示模式

 


安裝Sublime Text 2

image

http://www.sublimetext.com/2

目前Sublime Text 2仍然是Beta版,版號為:2165

如果你不想用這個版本,而是想要用更新一點的,最好是能夠用到作者的開發版本,這當然可以,有 Dev Build 的版本能夠滿足這樣的需求,而且有新的dev build版本更新時會通知你,

http://www.sublimetext.com/dev
image

目前Dev Build的版本為:2178, 發佈日期是:2012-02-15



以下的安裝說明將會是以Sublime Text 2 Beta 2165 Windows(32-bit)安裝版的操作來做描述。
image

檔案下載完成之後就直接執行以進行安裝,
image

安裝畫面
image

安裝路徑如果沒有特別需要的話就使用預設的路徑,之後的步驟就是一下Next下去,最後就是Install然後Finish。
image

image

安裝完成之後,到Windows「開始」的程式集裡面就可以看到「Sublime Text 2」的項目
image


第一次執行的Sublime Text 2畫面(有夠陽春)
image

坦白說,這麼陽春的程式畫面應該不會引起太多人的注意,甚至有人會掉頭就走,心想「這是什麼鬼東西呀」,但是先別著急,繼續看下去…


使用Sublime Text 2的命令面板(Command Palette)


使用Sublime Text 2時,第一個一定要熟記的快捷鍵就是「Ctrl + Shift+ P」,將會叫出 Command Palette,在Sublime Text 2中會常常使用到這個 Command Palette,
image
image

有很多的 Sublime Text 2 內建指令可以在這個 Command Palette 中來完成,而且輸入指令的同時會自動帶出相關的指令,
image



使用Console命令列


image

快速鍵:「Ctrl + `

注意喔~這個「`」並不是鍵盤上的單引號,而是鍵盤左邊「Tab」鍵上方的那一個鍵,不說明一下還是會有很多人一直以為是單引號,叫出來的Console命令列會出現在Sublime Text 2畫面的下方,

image

基本上我很少會使用到Console命令列來做事,除了第一次安裝Package Control之外,這個Console是要餵食Python指令的(Sublime Text 2的外掛也是需要使用Python開發),如果你想要用這個Console來做點事情也想要了解一下Python,你可以在Console命令列中輸入 help(),Console就會輸出以下的內容:

image


開啟/關閉側邊欄(Sider Bar)


image

太過於陽春的畫面用起來也怪彆扭的,所以我們可以開啟側邊欄,側邊欄是用來顯示目前開啟的檔案或是目錄,
快速鍵:「Ctrl + K,  B
開啟了側邊欄的 Sublime Text 2,如下:

image

開啟兩個檔案
image

開啟一個目錄
image

在「Open Folder」的模式中,側邊欄會列出該目錄下的子目錄與檔案,當滑鼠左鍵單擊一個檔案的時候,會在編輯區塊顯示目錄內容,在還沒編輯檔案內容時都還不算是開啟的檔案,這個情形下都還算是檔案預覽內容的狀態,

image

image

如果你 Double Click 檔案或是對預覽的檔案進行編輯的動作,這時候就會開啟檔案,而側邊欄的「OPEN FILES」就會列出開啟的檔案名稱,編輯區塊也會顯示頁籤,

image



文件切換

當開啟的檔案很多的時候,有時候為了能夠持續在鍵盤編輯的狀態下而不想抽出右手去使用滑鼠操作,這個時候可以用快速鍵來切換開啟的檔案,

image

如果是想要順著頁籤的順序做檔案的切換,可以使用兩種組合,

第一種:Ctrl + PageDown or Ctrl + PageUp
第二種:Ctrl + Tab or Ctrl + Shift + Tab
(注意喔,Ctrl 是指鍵盤上左邊的哪個)

如果你想要明確一點的切換已經開啟的檔案,你也可以使用「Alt + 數字鍵」的方式,不過這個方式會比較適合只開啟幾個檔案的方式,檔案開了一端的時候,哪裡還記得頁籤號碼是開啟哪個檔案。

如果你想要快速切換或是開啟目錄下的檔案,其實還有另外一個更方便的方法,
快速鍵:Ctrl + P

image

當按下快速鍵「Ctrl + P」後,就會顯示快速切換文件的命令列,如果是在「FOLDERS」的狀態,就會把該目錄以及包含子目錄下的文件檔案給列出來,如果只是移動上下鍵,如果移到已經開啟的檔案,那麼編輯區塊就會顯示那個已開啟檔案的頁籤,如果是移動到尚未開啟的檔案上,只要按下「Enter」就會開啟該選定的檔案。


更換編輯顯示模式


有時候作業系統會同時開啟很多的程式來工作,常常會搞得我們無法專心的處理目前的工作,所以我們可以將Sublime Text 2切換成全螢幕模式(Full Screen),如此一來就可以專心的編輯文件,

全螢幕模式,快速鍵:F11
image

要解除全螢幕模式就是再按一次F11就可以了。


萬一已經切換成全螢幕模式還是無法讓你專注的進行編輯,可以切換成「無干擾模式(Distraction Free Mode)」

無干擾模式(Distraction Free Mode)快速鍵:Shift + F11

如此一來就可以更加的專注於你要編輯的文件上面

image

要是覺得這個無干擾模式的樣式不合你意,我們可以進行修改,點選以下的項目,

Preference → File Settings – More → Distraction Free – User

image

點選項目後將會開啟一個檔名為「Distraction Free.sublime-settings」的檔案,然後將以下的設定內容貼上,

{
    "line_numbers": false,      //是否顯示行號
    "gutter": true,   //文件左邊是否顯示裝訂邊
    "draw_centered": true,      //是否置中顯示
    "wrap_width": 140,          //每一行顯示的寬度(以字元計算)
    "word_wrap": true,         //是否自動換行
    "scroll_past_end": false  //Scroll Bar的顯示是否超過文件的結尾
}

你也可以自行調整你所想要的顯示模式,修改玩之後記得存檔,接下來就來看看套用修改過設定的無干擾模式,

image

修改設定後的無干擾模式是不是覺得更加地順眼呢?!而在無干擾模式下的文件切換或是文件開啟,可以使用快速鍵來執行。

萬一你還是覺得上面有出現那個Sublime Text 2的Menu還是無法專心的話,沒關係,要精簡就精簡個徹底,將Command Palette給叫出來(Ctrl + Shift + P),然後輸入「Menu」後就會看到…

image

是的,「Toogle Menu」…然後就直接敲下Enter鍵,就可以把Menu列給藏了起來,完完全全的無干擾。

image

如果想要讓Menu顯示的話,一樣是在Command Palette中輸入「Menu」然後Enter就可以恢復顯示。



不知不覺的就寫了長長一大串,為了避免大家看到睡著或是草草看過,所以這一篇就小道這裡告一段落,有關 Sublime Text 2 後續的介紹與使用方法會不定期的再告訴大家。


待續……

4 則留言:

  1. Sublime Text 2, 2012-02-22 版本更新:

    Build 2181

    http://www.sublimetext.com/blog/articles/sublime-text-2-build-2181

    回覆刪除
  2. 很棒的分享! Tks

    回覆刪除
  3. 真的很實用 學到了很多 感謝您!! :)))

    回覆刪除

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。