接下來我們來介紹幾種我在 vim 環境底下安裝的插件，以及簡單的 script 令他們符合我的需求吧！

vim 上的套件來源可以從 Vim Awesome 來找哦～

nerdtree —— 顯示資料夾結構：

plug 'scrooloose/nerdtree'

這個套件就像一般的 IDE 一樣，可以在 vim 底下顯示資料夾結構，並且不會因為沒有緩存檔案就離開 vim，因為左邊依然有個資料夾結構的視窗～

我對這個套件也進行了一些調整：

1. 怎麼每次都要輸入指令才能開啟資料夾啊？

   nnoremap <silent> <C-a> :NERDTreeToggle <CR>
   

   這讓我在按下 ctrl + a 時就自動顯示或隱藏側邊資料夾視窗～

   這邊補充一下，silent 是希望 vim 在執行這個指令的時候不要顯示相關的信息，包含執行了 :NERDTreeToggle 的命令。

2. 阿我外部檔案更新資料夾怎麼更新？

   nerdtree 並沒有幫我們自動偵測檔案的變更，所以必須手動刷新資料夾結構，可是我也懶得下指令來刷新

   nmap <Leader>r :NERDTreeRefreshRoot <CR>
   

   NeoVim 中預設的 Leader Key 是 \ 反斜線，所以這個設定讓我按下 \ 後再按 r 就可以刷新整個資料夾結構。

   如果想要更改 Leader Key 的話，可以下 :let mapleader='[Leader Key]'

3. 咦？怎麼看不到 .gitignore 跟 .gitkeep 這些檔案？

   nerdtree 預設也不會把隱藏檔案列出來，但開發時又常常需要去更動一些隱藏檔案，因此我乾脆就不隱藏了。

   let NERDTreeShowHidden=1
   

4. 每次開啟一個工作環境都要再按一次快捷鍵開啟資料夾視窗，那麼麻煩！

   那我乾脆寫個 autocmd 在進入時就自動幫我們開啟資料夾好了。

   function StartUp()
       NERDTree
   endfunction
   autocmd VimEnter * call StartUp()
   

   可是我有時候只是想用 vim 改一個設定檔案啊？

   function StartUp()
       if ''==@%
           NERDTree
       endif
   endfunction
   

   @% 代表檔案名稱，當檔案名稱為空的時候我再開啟 nerdtree

只是增加個資料夾視窗就變得很像 IDE 了呢！可是怎麼檔案都沒有相對應的 ICON？

vim-devicons —— 顯示檔案的 ICON

plug 'scrooloose/nerdtree'

為了讓資料有相應的 ICON，這個套件實作了藉由判斷副檔名將 ICON 插在檔名的前面，更利於開發者辨別檔案類型。

雖然裝完了這個套件感覺很像 IDE 了，但怎麼每種檔案 ICON 的顏色都一樣？

vim-nerdtree-syntax-highlight —— 讓 ICON 具有顏色

plug 'tiagofumo/vim-nerdtree-syntax-highlight'

想要讓各種檔案的 ICON 具有顏色，可以使用這款套件，它還具有自訂顏色的功能唷～

不過因為三不五時需要寫 vue，但它卻沒有實作 vue 的顏色，那就只好自訂了。

let g:NERDTreeExtensionHighlightColor = {}
let g:NERDTreeExtensionHighlightColor['vue'] = '42b883'

今天的套件就介紹到這邊吧，我們的 vim 已經越來越像 IDE 的設置了呢！