1. 程式人生 > >Notepad++配合FingerText打造快速高效的前端開發文字編輯器

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)按回車鍵,結果如下:


        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]!]出現在多個地方而已。

參考文獻

官方文件