2012年3月2日 星期五

Sublime Text 2 - 好用的前端程式編輯器 Part.5 使用Alignment對齊你的Code


我還不算是個有嚴重程式碼潔癖的人,但至少程式碼看起不要太過於雜亂就好,

但是在程式碼中看到一些亂亂的地方時,也還是會覺得礙眼…

image

如上圖的情況,如果這種沒有對齊的情況不是很多的情況下,很多人一定會選擇忽略,或是動手去調整一下,

假如這個情況出現的越來越頻繁,或是沒有對齊的地方太多,久而久之就不會多花時間來整理。

Sublime Text 2有個Package「Alignment」就可以幫我們解決這個問題,

大部分介紹Sublime2的部落格文章也一定會提到這個Package,當然這裡也不免俗的也要來介紹啦。



Alignment


http://wbond.net/sublime_packages

image

http://wbond.net/sublime_packages/alignment

image


透過Package Control安裝Alignment


叫出Command Palette,然後輸入「install Package」,接著再輸入「alignment」

選擇「Alignment」後按Enter鍵就可以安裝,安裝完成後重新啟動Sublime2。

image


使用Alignment對齊程式碼


首先在Sublime2中開啟你的程式碼,然後把你要想要對齊的部份給選取起來,

image

你可以用滑鼠去把要對齊的地方給選取起來,或是也可以使用快速鍵把這幾行程式做選取,

Expand Selection to Line「Ctrl + L」

先在要選取起來的地方第一行按下「Ctrl + L」然後就會把第一行給選取起來,

接著再多按幾次「Ctrl + L」就會把以下幾行程式碼也都做選取的動作,

這個多行選取的操作可以多練習幾遍,熟悉一下這個操作方式,這在編輯程式碼的時候相當方便好用。
將程式碼給多行選取起來之後,接下來一樣使用快速鍵「Ctrl + Alt + a」

接下來可以看到多行選取的程式碼就已經對齊啦!

image

Alignment在v2.0.0之前的版本,本來的快速鍵是「Ctrl + Shift + a」,但是在v2.0.0就改為「Ctrl + Alt + a」,

這邊做個提醒,這是為了要跟Sublime2的「Expand Selection to Tag」的快速鍵做區隔所做的修改。



修改設定


Alignment預設是以「=」為對齊的字符,所以「Ctrl + Alt + a」只會對變數這種用「=」的程式碼有對齊的作用,

如果是想要對使用不同字符間隔的程式碼做對齊的操作,那麼將不會有任何的作用,

例如說,想要對一個Javascript Object Literal(或是JSON內容)去做對齊的操作,如下:

image

我們想要也讓使用「:」字符間隔的程式碼也可以有對齊的操作就必須要對去修改設定,

首先要開啟Alignment的Settings - User,

「Preferences > Packages Settings > Alignment > Settings - User」
image

將會開啟一個「Base File.sublime-settings」的檔案,一開始會是空白的(除非你之前有做過修改),

這時候就加入以下的內容:
{
    "alignment_chars": ["=", ":"]
}

貼上之後就儲存,不必重新開啟Sublime2就可以直接套用,然後對剛才的Javascript Object Literal做操作測試,

將Object Literal的內容給選取起來,

image

然後使用快速鍵「Ctrl + Alt + a」,接著就可以看到有對齊的效果了,

image


其它操作


上面的兩種操作都是針對多行選取,其實也有對單行的操作,

雖然說單一行的程式碼沒有什麼好對齊的,而在Alignment的Default Settings中有兩種針對單行操作的設定,

// If the following character is matched for alignment, insert a space
// before it in the final alignment
"alignment_space_chars": ["="],

// The characters to align along with "alignment_chars"
// For instance if the = is to be aligned, there are a number of
// symbols that can be combined with the = to make an operator, and all
// of those must be kept next to the = for the operator to be parsed
"alignment_prefix_chars": [
    "+", "-", "&", "|", "<", ">", "!", "~", "%", "/", "*", "."
]

直接圖示操作會比較清楚,

寫程式的時候,常常都會鍵盤敲下去之後就劈哩啪啦的一直打下去,有時候並不會注意「=」之前要去空一格,

image

在Visual Studio 2010中如果是打這樣的一行程式碼,VS2010都會自動幫我們做好格式化的動作,會自動幫我們去把「=」的前後都加上空格,

Sublime2是文字編輯器,雖然他有支援很多的Packages來做很多事情,但有些事情就不是那樣的「自動」,

所以在Sublime2中,當輸入完一行程式後,可以將這一行程式給選取起來,

接著用快速鍵「Ctrl+Alt+a」,Alignment就會幫我們把這一行程式的「=」之前加上空格,

image

如果在Value裡面有「=」的話,Alignment是會略Value裡面的「=」

image

而「alignment_prefix_chars」這個設定則是說在「alignment_chars」的前面是可以加上特定的字符,當使用快速鍵做Alignment操作時也要做對齊的操作,

特定的前置字符「"+", "-", "&", "|", "<", ">", "!", "~", "%", "/", "*", "."」

例如在最常見的字串串接的操作,也是可以做對齊的操作:

Before
image

After
image




這篇Package「Alignment」的介紹就到此為止,這一個Package算是Sublime2最為基本也是最多人安裝的,

熟悉它的操作以幫助我們把程式碼做好整理。


以上

6 則留言:

  1. 請問for Mac的快捷鍵是什麼呢?我試了很多都沒有。。

    回覆刪除
    回覆
    1. Hello, 我並不是 Mac 使用者,所以我不清楚快捷鍵為何,不過應該可以將 Ctrl 置換為 Cmd 試試看,
      請看套件的說明頁,或者是自行修改設定。
      http://wbond.net/sublime_packages/alignment

      刪除
    2. mac快捷鍵:Command+Ctrl+a
      參考自:http://www.granneman.com/webdev/editors/sublime-text/packages/how-to-install-and-use-sublime-alignment/

      刪除
  2. 作者已經移除這則留言。

    回覆刪除
  3. 請問如果我想要在單排對齊第二個等於有辦法嗎?例如我已經達成:

    meta http-equiv ="Content-Type" content="text/html; charset=utf-8"/
    meta name ="description" content="Default Description"/
    meta name ="keywords" content="Varien, E-commerce"/

    第一個等於對齊,有辦法把第二個content的等於也對齊嗎?

    回覆刪除
    回覆
    1. 很抱歉,對於你所提問的內容,我並沒有什麼研究..

      刪除

提醒

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