Notepad++配合FingerText打造快速高效的前端開發文本編輯器

Finger Text是Notepad++的一個标簽代碼替換和文本自動完成插件。Notepad++配合标簽替換功能可以極大的提升編碼速度，提高工作效率。

也許有人使用過QuickText插件，它們的功能類似，在早期尤其是Xp版本上是非常好用的，不過已經停止更新了，在Win7版本上沒有辦法使用，在XP上還是可以接着用的，不過已經被Notepad++從官方的插件清單裡移除了。

安裝Finger Text

因為Finger Text較高的品質，穩定的更新，已經被Notepad++加入到官方插件清單裡的。是以安裝非常友善，隻要在Plugin->Plugin Manager->Show Plugin Manager裡面選擇Finger Text，然後點選安裝就好了。

安裝代碼片段包

所謂的代碼片段包就是替換規則，比如輸入if之後替換成什麼代碼片段。插件提供了一個預設包，覆寫了大部分語言，比如JavaScript，HTML，CSS等。如果沒有預設安裝，可以手動安裝，plugin > FingerText > Install Default Snippet Package。

基本用法

點選Plugins > FingerText > Show SnippetDock将會打開一個Finger Text的對話框，對話框的最下面是一組可用的代碼替換規則。

當使用者開始輸入時，右邊就會顯示和輸入内容相對應的代碼片段， 比如輸入 'npp'，按tab鍵将會替換成 'Notepad++'，如果在HTML語言裡輸入p，按tab鍵将會替換成 <p></p>。

要注意的是，Finger Text會根據你的輸入在右邊進行過濾的，比如輸入 'i'，就隻會顯示'i'開頭的，這個有助于你查找。 Finger Text還支援代碼補全，比如輸入'com'，點選Plugins>FingerText>Tag completion就會自動把'comment'補全，如果有多個比對'com'，則會把第一個補全。

代碼片段範圍

Finger Text的代碼片段分為兩部分，<GLOBAL>和各個語言的代碼片段，<GLOBAL>是所有語言都可見的，其它就是每個語言隻可見該語言自己的代碼片段。Notepad++會自動根據檔案的擴充名來識别語言的，使用者也可以自己手動設定語言來測試一下看看。HTML語言比較特殊，它會同時顯示HTML，CSS，JavaScript的代碼片段，因為HTML檔案可以包含這些東西。

語言範圍的格式一般是<Lang:Cpp>，而HTML，CSS，JS則是<Ext:html>, <Ext:css>, <Ext:js>這些規則在編輯或者添加代碼片段有用，這用于區分這個代碼片段是哪個語言的。

熱點導航(Hotspots Navigation)

所謂的熱點(Hotspots)我覺得就是代碼片段中可變部分，或者說使用者一般需要修改的部分，比如在JS中輸入if按tab鍵，它的結果如下：

if ({condition})
        {
          $[![]!]
        }
      
           

其中{condition}和$[![]!]都是熱點，剛開始光标應該是在{condition}上面，輸入内容後，比如a < b, 按tab鍵光标會跳到下一個熱點，也就是$[![]!]，同時會把$[![]!]删除。

這裡熱點還有另外一個更重要的用法，那就是以參數的形式傳入替換掉熱點的值。還是以if為例，if有2個熱點，如果我們輸入if(a < b)按tab鍵，a < b将會作為第一個熱點的值顯示 出來，結果如下：

if (a < b)
        {
          $[![]!]
        }
      
           

如果我們傳入2個參數，則兩個熱點值都會被替換，比如if(a < b, a = 1)按Enter鍵，結果如下：

if (a < b)
        {
          a = 1;
        }
      
           

熱點是允許多個同名熱點存在的，比如js裡的for裡面有3個i都是熱點，輸入第一個i值，後面的都會被替換掉的，你可以了解它們其實是同一個引用。

千萬要記住，if和後面的()之間不能有空格，否則它們就不是同一個字元串了，貌似Finger Text隻處理光标之前的那個字元串。Finger Text會在替換後的if之後加上空格的。

建立和編輯代碼片段

如果插件自帶的代碼片段不能滿足你的需求時，則自己可以建立新的代碼片段或者編輯已有的代碼片段。

最簡單的建立方法就是先選中需要的内容，然後點選Plugins>FingerText>Create snippet from selection進入到建立頁面，需要輸入3個字段： TriggerText，就是用來你的代碼片段的關鍵字。Scope，就是你的代碼片段的範圍，是全局的還是特定某種語言的。Snippet Content，就是要建立的代碼片段的内容了，Finger Text一般會自動把結束符 [>END<] 加上的，不要删掉。

如果你打開了Finger Text面闆，面闆上面也有一個'Create snippet from selection'按鈕，效果是一樣的，如果你沒有選擇内容直接點選建立按鈕，就會提供一個空白的模闆給你建立。

要編輯一條已有的代碼片段，隻要在Finger Text面闆上選擇該條目，然後點選'Open Snippet Editor'，或者先把Finger Text的Edit模式，然後輕按兩下該代碼片段即可。

貌似删除功能目前不能用，不懂為啥。

基本的熱點編輯

如果你不滿足于建立靜态的文本代碼片段，那我們可以自己建立帶熱點的代碼片段。

熱點的基本文法： $[![Whatever Text]!]，其中'Whatever Text'是熱點的提示，同時也可以作為熱點的預設值，參見if的第一個熱點。你也可以建立一個空的熱點$[![]!]，空的熱點的最大特點是當你把光标移動到該熱點時，熱點本身會被移除，你可以了解它為一個占位符，參見if的第二個熱點。但是不管是不是一個空的熱點，隻要傳值進來就可以進行替換，它們的差別隻在沒有傳值進來時。

我們也可以建立多個同名的熱點，比如像for語句需要3個相同的熱點i，傳值或設值隻要一次就可以了。寫法很簡單，我們看一下js for的寫法：

for ($[![i]!]=0;$[![i]!]<=$[![max_value]!];$[![i]!]++)
        {
          $[![]!]
        }
      
           

其實就是$[![i]!]出現在多個地方而已。

參考文獻

官方文檔

如需轉載，請注明來自: BorisHuai前端修煉 > Notepad++配合FingerText打造快速高效的前端開發文本編輯器