2012年3月14日 星期三

Sublime Text 2 - 好用的前端程式編輯器 Part.8 - 手動安裝Package



昨天有人在「Sublime Text 2 - 好用的前端程式編輯器 Part.6 另一種對齊的Package Abacus」提出了問題,

image

之前的Package安裝都是透過「Package Control」來進行,如果說要手動安裝Package的話,要如何操作呢?

這在之前的文章裡面都未曾提及,而這一篇就會針對這個問題來進行手動安裝Package操作說明,

而手動安裝的Package則選擇「BracketHighlighter」,這是一個可以讓括號高亮顯示的實用小套件,

在文末也會有手動安裝Package的操作視訊畫面,讓各位可以更加清楚了解整個操作的流程。





BracketHighlighter


http://wbond.net/sublime_packages/community

https://github.com/facelessuser/BracketHighlighter

image

這個Package會把文件內的括號有高亮顯示的效果,在編輯程式的時候尤其在function內,可以能夠清楚知道function的範圍或是某個判斷式的範圍。



安裝「BracketHighlighter」前

在Sublime2中,將游標移到大括號時,預設還是有用底線將左右大括號給標示起來,但是相當不明顯。

image


安裝「BracketHighlighter」後

游標移到大括號或是一般的括號就會有明顯的高亮顯示。

image

接下來就會說明如何以手動方式(不透過Package Control)來安裝「BracketHighlighter」。





一、取得「BracketHighlighter」的壓縮檔

https://github.com/facelessuser/BracketHighlighter

點擊「BracketHighlighter」於github的Repository網頁中的「Zip」圖示,以取得Package的Zip檔案,

image

點擊「Zip」圖示後,就會下載Zip檔案,把此檔案給放到你找得到的位置

(別怪我多嘴,真的很多人從瀏覽器下載檔案後會找不到檔案,尤其是用IE…)

image




二、解壓縮檔案

image

1.開啟壓縮檔,並且解壓縮內容

2.更改解開壓縮後的目錄名稱,原本「facelessuser-BracketHighlighter-94db9c5」給為「BracketHighlighter」

然後記得將「BracketHighlighter」目錄給複製起來。





三、開啟Sublime2並開啟Sublime2的Package安裝目錄


開啟Packages目錄的方法一:

「Ctrl + Shift + P」呼叫出Command Platte,輸入指令「Browse Packages」然後按Enter鍵。

image


開啟Packages目錄的方法二:

點選功能選單「Preferences > Browse Packages…」

image


Sublime2的Packages安裝目錄

SNAGHTMLd625fb





四、複製並貼上「BracketHighlighter」目錄

直接看圖!反正就是複製、貼上的操作…

image

貼上之後,如果已經開啟了Sublime2,那麼就要將Sublime2給關閉然後重新開啟。




五、開啟Sublime2,檢視「BracketHighlighter」的效果

大括號

SNAGHTMLe00cc0

中括號

SNAGHTMLe30add

小括號

SNAGHTMLe0cc86

單引號

SNAGHTMLe1f876

雙引號

SNAGHTMLe3ace6

角括號 Tag

SNAGHTMLec07e1

另外,如果游標是在高亮的括號上,可以使用快速鍵「Alt + Up」或是「Alt + Down」(上下鍵),就可以快速在兩個括號之間移動。



七、手動安裝Package操作視訊畫面







以上就是說明如何手動安裝Package的操作流程,藉由手動安裝「BracketHighlighter」Package讓各位可以清楚了解整個步驟,

手動安裝是比較適合在沒有網路環境下來操作,有網路環境的情況還是比較建議使用「Package Control」。


延伸閱讀

Sublime Text 2 - 好用的前端程式編輯器 Part.3 安裝Package Control
http://kevintsengtw.blogspot.com/2012/02/sublime-text-2-part3-package-control.html


以上

8 則留言:

  1. 您好,我照著這篇的步驟安裝了BracketHighlighter,重開sublime text2後卻沒有效果,這個package很必要,請問您有遇過這樣的情況嗎?另外,在package中也找不到goto symbol

    回覆刪除
    回覆
    1. Hello,
      這一篇是說明如何透過手動安裝 BracketHighlighter 這個套件,其實也可以透過 Package Control 來安裝,
      有關 Package Control 的安裝以及使用說明可看以下的這一篇文章,
      「Sublime Text 2 - 好用的前端程式編輯器 Part.3 安裝Package Control」
      http://kevintsengtw.blogspot.tw/2012/02/sublime-text-2-part3-package-control.html

      刪除
  2. kevin您好,謝謝你這幾篇淺顯易懂的介紹,收穫很多
    我是只接透過Package Control安裝BracketHighlighter
    有功能出來,列號旁出現{}/[]/()符號
    但{, }, [, ], (, ) 本身並沒有顯示為淡綠色區塊
    是否需要修改哪個設定才會出來呢
    謝謝

    回覆刪除
    回覆
    1. 看看這個討論串,https://github.com/facelessuser/BracketHighlighter/issues/72
      對於有關任何 Sublime Text 2 Packages 的任何問題直接去問作者或是去這些 packages 的 github 看看會比問我快!

      刪除

    2. bh.core.sublime.setting這裡


      // "default" style defines attributes that
      // will be used for any style that does not
      // explicitly define that attribute. So if
      // a style does not define a color, it will
      // use the color from the "default" style.
      "default": {
      "icon": "dot",
      "color": "brackethighlighter.default",
      "style": "underline"
      },
      你可以把他改成

      // "default" style defines attributes that
      // will be used for any style that does not
      // explicitly define that attribute. So if
      // a style does not define a color, it will
      // use the color from the "default" style.
      "default": {
      "icon": "dot",
      "color": "entity.name.class",
      "style": "underline"
      },


      作者把裡面的這一段改掉了 可以考慮用這個方法去把他調回來。

      就會有原本的綠色了

      刪除
    3. "default" 內改成
      "color": "entity.name.class",
      另外下列style選一各
      "style": "underline" -> 底線
      "style": "outline" -> 外框
      "style": "hightlight" ->版大介紹的

      刪除
  3. 為何我想要直接用Package Control來安裝BracketHighlighter,但都無法搜尋到?

    回覆刪除
    回覆
    1. Hello,
      我不清楚你所使用的是 ST2 還是 ST3,如果是 ST3 的話,你可以先看看原作者的說明,
      https://github.com/facelessuser/BracketHighlighter/tree/master#sublime-text-3-support
      ST3 要以手動安裝的方式來安裝 BracketHighlighter,適用於 ST3 的 BracketHighlighter 位置如下:
      https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

      刪除

提醒

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