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

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

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



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

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

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

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

---

Alignment

http://wbond.net/sublime_packages



http://wbond.net/sublime_packages/alignment

透過Package Control安裝Alignment

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

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

使用Alignment對齊程式碼

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



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

Expand Selection to Line「Ctrl + L」

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

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

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

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



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內容）去做對齊的操作，如下：



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

首先要開啟Alignment的Settings - User，

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


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

這時候就加入以下的內容：

{

    "alignment_chars": ["=", ":"]

}

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

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



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

其它操作

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

雖然說單一行的程式碼沒有什麼好對齊的，而在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": [

    "+", "-", "&", "|", "<", ">", "!", "~", "%", "/", "*", "."

]

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

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



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

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

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

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



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



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

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

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

Before


After

---

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

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


以上