Vim常用插件——前端開發工具系列


作為一名開發者,應該對編輯器之神Vim與神之編輯器Emacs有所耳聞吧。編輯器之戰的具體細節有興趣的童鞋可以google之。

Vim最大的特點是打開速度快,功能強大,一旦掌握了其中的命令,編程過程雙手就不需要離開鍵盤了。

用習慣了Vim的另一個好處是在linux下可以很輕松地用vi來處理文件,當然emacs也可以做默認編輯器,但是不是每台機器都有安裝Emacs。

今天主要給大家介紹Vim在前端領域的一些常用插件:

1.mark.vim

mark.vim主要的功能是變量的高亮。

選中要高亮的詞,使用 \m 來使其高亮,多個詞的高亮會顯示為不同的顏色,在不需要查找的時候以及代碼review的時候使用效果還是挺不錯的,

使用\n可以去除所選的詞的高亮。

更多詳情可以點擊插件主頁了解。

ps: 查找單詞可以使用 * 這個命令來進行快速搜索

2.zencoding.vim

zencoding.vim 后來改名為Emmet.vim,主要功能是實現代碼的快速編寫。

具體教程可以參見官方的網站

個人感受是做頁面重構的時候用得比較多,通過命令可以快速生成html的結構,提高了前端開發的生產力。

3.ctrlp.vim

ctrlp.vim主要功能是對文件以及buffer進行模糊查詢,快速打開文件。

操作實例如下圖所示:

在知道文件名的情況下,使用ctrl + p打開此插件,輸入文件名,實則是文件名開頭幾個字母就可以快速打開文件。

ps:如果當前的文件已經保存好,那么會直接替換成搜索到的文件,如果沒有保存的,會進行窗口的分隔類似與sp的命令。

所以在對比文件的情況下我一般會用vsp來分割窗口或者tabnew一個新的tab,再打開新的文件。

如果需要查其他目錄或者忘記了文件名的話,就可以使用下面的插件NERD_tree了。

4.NERD_tree.vim

NERD_tree.vim主要功能是一款文件瀏覽器,可以查看文件目錄結構打開相應的文件。

具體演示如下圖所示:

我是使用綁定的快捷鍵F4來打開文件瀏覽器,光標在文件瀏覽器中可以用jk來移動,回車鍵可以打開文件,按q可以退出文件瀏覽器。

5.neocomplcache.vim

neocomplcache.vim主要功能是進行代碼補全,

優點是對上下文進行索引,結果保存到緩存中,自動補全的效率比較高,另外匹配的也比較精准。

補全效果如下圖展示:

im中的代碼補全插件比較多,一般補全的智能性依賴於插件的字典,變量緩存機制。

從這點看neocomplcache也是挺不錯的,另外智能讀讀取路徑的功能也是挺贊的。

6.multiple_cursors.vim

multiple_cursors.vim的主要功能是多光標多行編輯。

主要效果可以見下面的圖片:

在沒有這款插件前,原生命令一般是進行塊操作,在可視模式下對多行進行操作。步驟比較冗長,也容易出錯,

這款插件可真謂利器啊,同時它還支持正則的操作呢。

7.commentary.vim

commentary.vim主要功能是可以批量注釋單行或多行以及去除注釋;

綁定退格鍵,選擇多行可以直接以/**/的形式注釋代碼

 

最后,幾款插件都是在前端開發中經常用到的,還有很多功能,原生的一些命令還是可以做的,

另外用Vim還有一個好處是從寫C到寫PHP再到寫JS,都可以用同一個編輯器,還是挺方便的。

快捷鍵神馬的自己在vimrc中配置即可,

打造自己的IDE的過程雖然折騰,但是之后使用的過程還是挺爽的呢~~~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM