常用程式碼片段的管理技巧及使用工具

協助前端架站久了之後，有許多常見的小工具會用到，代表需要安裝的程式碼中，有一部份是重複性高的，例如：

• FB 讚、分享按鈕
• 各種社群分享按鈕
• FB 留言板等等

能重複使用的程式碼自然較有價值，即使是不能 100% 套用，但只要修改一部份就能用在新的情境，也是可節省大量時間，這些程式碼都值得用一套規則保存及管理。

只有 10 組程式碼要管理時當然很輕鬆，但有上百組、數百組時怎麼辦呢？有沒有好的管理工具或技巧，可以快速找到需要的程式碼呢？

一、原始作法的困境

一開始寫的 code 比較少時，我用 2 種方式記錄保存：

• Evernote
• 存成對應的 html/css/js 檔案，再使用 Windows 軟體「Everything」搜尋

當資料數量較少，搜尋起來雜訊沒那麼多，終歸可以找到需要的 code。但等到資料量一大時，缺點就浮現了。


1. Evernote

• 由於先天上的限制，Evernote 的分類最多只有 2 層，很難對所有程式碼進行較有系統的分類及管理。
• 很多客戶會用到類似的程式碼，那麼進行搜尋時，很容易就列出所有相似的程式碼，不容易有精確搜尋的方法
• Evernote 會同時對標題及內文進行搜尋，因此不相關的搜尋結果太多
• 如果為了這件事改用其他記事軟體，例如 oneNote，同時使用多個記事軟體在管理上不是好的作法

2. Everything

• 直接用 Window 資料夾進行分類，管理上會比 Evernote 來得有效率，再搭配 Everything 搜尋更是完美
• 可惜實際操作上還是會遇到跟 Evernote 一樣的情形，當多個客戶用到類似程式碼時，搜尋結果會出現大量雜訊。

總之，不管使用哪種方案，需要的都是如何縮短搜尋的時間，有效排除不精確的搜尋結果。

二、程式碼管理工具

1. 管理工具

因此研究了一下，是否有什麼管理程式碼的好工具，大致找到這些：

• Developer's Tips & Tricks：
  • 可參考這篇「Developer's Tips & Tricks - 程式開發小助手」
  • 已經事先依照各種程式語言做好分類，滿方便的
• Snip-It Pro：可參考這篇「程式碼片段管理工具」
• iCode Library：可參考這篇「程式碼片段管理工具-iCode Library.NET」

2. 使用缺點

大致裝來玩一玩後，總覺得沒有 Evernote 或 Everything 來得方便，大概歸納一下：

• Evernote 或 Everything 都是系統必備的常駐工具，有熱鍵可以隨時叫出來搜尋
• 如果另外安裝程式碼管理工具，需要使用時才執行軟體，效率上有點慢
• 如果要在多個裝置使用，得每個裝置都安裝、建立所有程式碼片段。
• 這些軟體不會有雲端同步的功能，代表每個裝置要自己想辦法同步所有程式碼
• 這些工具多半使用英文開發，對中文的支援度不一定夠

所以沒多久我就放棄使用這些工具了，轉而想辦法研究能否讓 Evernote 或 Everything 更好操作。

三、Everything 搜尋特定資料夾

為了能夠讓程式碼在所有裝置同步，必須在 Dropbox 內建立一個專門存放程式碼片段的資料夾。

為這個資料夾建立多個分類資料夾、多層子分類資料夾之後，如果可使用 Everything 單單搜尋這個資料夾之下的所有內容，排除其他不相關的內容，我想就是一個最簡便的方案了。

搜尋到 Everything 這個討論串「Limiting search to within a folder」，提供了不少概念。


1. 使用命令列

官方提供了許多命令列的指令，可參考官網文件「Command Line Interface」。

例如使用以下的指令，就能搜尋特定資料夾，及所有子目錄：

C:\Everything\Everything.exe -path 完整路徑


2. 寫入登錄檔

原討論串有網友提供了密技，將一些指令寫入 Windows 登錄檔，將來按右鍵時就會出現選項，可以直接用 Everything 搜尋特定的資料夾。


3. 從檔案總管搜尋資料夾

詳細設定方法請參考這篇「Everything 重要技巧」，在設定中勾選右鍵選單的選項後，將來在檔案總管任何資料夾，只要按右鍵都能直接用 Everything 搜尋該目錄及所有子資料夾。


4. 搜尋捷徑

經過我的實測，如果將某些常用資料夾設成捷徑，放在 Windows 桌面上，按右鍵用 Everything 搜尋這個捷徑，一樣有搜尋該目錄及所有子資料夾的效果。

那麼這個作法比進入檔案總管選取資料夾，再按右鍵搜尋，會來得快更多。


5. 製作熱鍵

如果能直接做個熱鍵，按了就執行搜尋特定資料夾，那麼又比以上所有方案快更多。

研究了一下，作法如下：

• 用文書編輯軟體製作一個 .bat 檔，內容類似以下：
  • C:\Everything\Everything.exe -path E:\Dropbox\
  • 前一個路徑為 Everything 所在位置，後一個路徑為要搜尋的資料夾
• 儲存後將 .bat 檔放在自己記得住的地方
• 對這個 .bat 檔按右鍵，建立捷徑，將捷徑放在桌面
• 對這個捷徑按右鍵 → 內容，可設定快速鍵

將來直接快速鍵，就能執行用 Everything 搜尋特定資料夾了。

四、小結

簡單做個總結，Evernote 由於會同時搜尋標題及內文，因此較難搜尋到精確的結果。而 Everything 將搜尋範圍縮小到特定資料夾後，只要用心為標題命名，就可以有精確的搜尋結果，能有效管理整理好的程式碼片段。

不過提醒一下，本篇的方法比較適合業餘愛好者使用，如果是職業工程師，只要打開電腦就使用 Visio Studio 這類專業開發工具的話，其本身就有相關的 code snippet 套件可使用，會有不一樣的管理方式與技巧，就不一定需要另外存放程式碼片段了。

更多網頁開發工具：