標籤：

如何使用 Vim 做前端開發？

01-05

很多同學用 Vim 以後總是愛問 A 功能 Vim 有沒有 B 功能 Vim 能不能實現，這時候我就特別想說一句「這些功能 Vim 統統都沒有，也不需要用 Vim 來實現「。

這麼講是因為 Vim 只是個文本編輯器，它應該是你開發工具鏈中的一環，而不是全部。我覺著一個牛逼閃閃的工程師應該擅長於組合各類工具形成一套自己的開發環境。比如你說的快速預覽，用 [grunt] 配合 [grunt-contrib-watch] 可以輕輕鬆鬆實現，而且不需要和任何一款編輯工具配合。除了 grunt 以外，Google 直接搜索 "css javascript live reload" 還可以獲得更多的相關信息，

我覺的 Vim 和 IDE 的最大區別就在於此，如果你用 Vim，不管你 Vim 配置的多麼牛逼，Vim 也就最多能佔到你工具鏈的 20%：調試得用 Chrome、提交代碼得用 git、部署環境得用 grunt 等等。而 IDE 對於一個開發者可能佔了整個開發工具鏈的 80%，我用 IDE 得 IDE 里調試、在 IDE 里提交代碼、 在 IDE 里部署環境等等，這些開發中遇到的常見任務在 IDE 里一站式解決。這對於我來說是一件非常不能夠忍受的事情，我希望一個工具要麼能100%搞定我的需求，要麼就允許我自由組合我的工具鏈，很顯然 IDE 做不到，所以我更喜歡 Vim 這種方式。

作為我個人來講，如果 IDE 對於這門語言有強大的代碼補全、代碼分析以及重構功能，我會選擇用 IDE，比如 objective-c / java，除此以外，我都會用 Vim。很顯然前端開發是後者。

扯遠了，回到題主的問題：

1. Vim 能不能用來做前端開發

當然可以

2. Vim 如何做快速預覽？

用 `grunt-contrib-watch` 任務的 livereload 特性，例如

watch: {
css: {
files: "**/*.sass",
tasks: ["sass"],
options: {
livereload: true,
},
},
},

可以實現 sass 文件自動保存的時候直接刷新瀏覽器內的樣式，不需要刷新整個頁面

除此以外 [tin.cr] 和 Chrome Web Developer Tool 的 workspace 功能都可以實現不刷新頁面重繪樣式。這裡先佔坑回頭下班了再補充。

[grunt]: Grunt: The JavaScript Task Runner

[grunt-contrib-watch]: gruntjs/grunt-contrib-watch ?? GitHub

[tin.cr]: Tincr Chrome Extension

我覺得這個問題不是一個問題。直接寫就好了。終端里的vim就不錯，配置可以很輕便，關鍵還是你要會搭配適合你開發的環境。

我會告訴你們，我寫actionscript，js，css，html，php，python，ruby，java，oc，都用vim么。。。因為我只會vim……圖中代碼做做樣子，正經開發的話，窗口應該再加幾個的。

有時候會在3-4個機器上寫代碼，看log，所以。你懂的。

編輯一下，屏蔽點東西吧還是。。

可以參考一下這個：

http://www.fantxi.com/blog/archives/vim-view-in-browser-func/

使用vim作為開發工具，我覺得是非常適合的。不過，vim使用並不簡單，經常需要折騰一堆東西，有時候效果還沒有IDE提供的那麼好。vim的優勢也很多，它是一個可以預見，十年之內都不需要換的開發工具，其他IDE什麼的，就說不定了，曾經dw很火，後來是aptana，現在是web storm，以後怎麼樣都不確定。另外，使用vim讓你對環境沒有要求，雖然很多人認為內存不是問題，但我覺得像我的開發機器，最低配的mac air，2g內存，不知道是不是非常弱了，反正我經常感覺內存不夠。開任意一個IDE，內存都會扛不住的，vim則沒有這個問題，最多只佔20M內存。

如何快速預覽調試，這個東西還是沒必要交給開發工具去完成吧，grunt，yoeman之內的工具可以做到，前端項目管理構建，grunt是一個不錯的解決方案。

VIM做為前端開發工具沒問題。VIM或者Notepad++甚至是windows的記事本都沒問題。我個人推薦sublime text 2。

如何進行快速的預覽調試，取決於你的WEB伺服器在哪裡。

  • 如果你的WEB伺服器是在遠端UNIX Server上，那你可以SSH到伺服器上直接修改文件、保存，刷新頁面，結束。
  • 如果你的WEB伺服器在本地的Windows，我更傾向於sublime text或者其他類IDE的編輯工具，在本地編輯、保存、刷新、調試。如果你想使用本地的IDE，修改遠端伺服器上的文件，那你有兩種方式：
  1. 可以使用SAMBA，將遠端伺服器虛擬成本地磁碟。這個相當於直接修改遠程伺服器上的文件。
  2. 可以Fiddler，將WEB伺服器的響應代理成本地文件。如果你沒有辦法直接修改遠端伺服器，這可能是最好的快速調試方法了。調試完成後，再通過某方法同步到遠端伺服器上去。

用vim做前端開發是否好，和開發環境也有很大關係。vim雖然沒有IDE那麼強大，但是作為一個代碼編輯器，它是夠用的。如果你的開發環境是linux，用vim是個不錯的選擇。你只要有自己習慣的vim配置文件，習慣的插件，就可以方便地在各台機器跳來跳去編輯代碼了。像我就會把自己的配置文件和插件在github上維護，每到台新機器，只要把它clone下來，就能完美編輯了。

做開發不僅僅是用一種語言吧，我用vim寫js，css，html，python，c++，親測十分順手。

我給自己買了個vps服務來當開發機，開個screen用vim編輯代碼，編輯狀態不會因為你登出而消失。然後還可以跑跑腳本，搭個server，弄個vpn。

扯遠了：）屌絲碼農愛折騰。

關鍵在於形成自己的workflow，找最適合的工具來完善這個workflow。vim只是一個可配置的文本編輯器而已，提供一個界面獲取你的輸入，並根據key-binding來調用command（其內置的，或者外部的工具），來完成對應的工作而已。所以所謂的編輯器之爭沒什麼意義。

前端開發用 VIM還不錯，我就是在window下用的。裝些必要的插件，比如zencoding（快速輸入html），autocomplpop（自動補全）。

在VIM基礎上快速的預覽調試到不清楚，希望有知道的童鞋能告知~

做前端牆裂推薦sublime,vim大多數後端用的,而且插件多了也會慢的，不管怎麼配置真心沒有sublime方便快捷順手

附圖片一張

sublime挺好的呀。夠酷炫的前提下還保證了開發時的暢快，首推呀。

說下個人的使用經驗，不強求一定要在命令行中使用VIM,我基本上使用常見的IED,例如sublimie,webstorm,Atom； 使用時我都會安裝vim插件，畢竟日常工作是畫畫頁面，然後切換到瀏覽器；寫完交互，切換到瀏覽器，所以不是長時間的對著vim的，因為場景老切換。 偶爾要到同事的機器上幫忙改個bug，首先裝個vim插件（同事不用vim)搞定bug，然後插件禁用掉，挺方便的。

新手摺騰vim還是挺費事兒的，推薦個vim套裝vim-dist/webvim，這個我偶爾用用

從sublime轉到vim已經一年了。vim用起來真的很爽。有興趣的看看這篇文章吧:https://buildall.github.io/2015/12/09/frontendvim/

你可以試試我的vim配置，專門面向前端開發。

https://github.com/ruanyl/bigvim

截圖

vim配置是一種考驗

工具的最終目的是開發代碼,每種工具都有好處和壞處，多試試 選擇自己趁手的就行了，就像到老婆 有各種要求 關鍵是自己合適的 因此如何想知道用vim 多了解下 看看自己順手不順手

atom挺好。

愛不釋手了已經。

只能說還不錯，在前端開發編輯器陣營里，可能最多就是2線，不建議折騰這東西，單文件用sublime text，項目用webstorm，很舒心，vim裡面前端開發的插件還是太少，因為前端已經很細化，我要使用react/angular/vue，在sublime或者webstorm都有很多插件，但是vim就少了，開發其他會不方便。不過要是你就是寫個原生js的話，還是沒太大問題的

之前用的sublime確實挺好的，自己可以設置快捷鍵，而且當時自己也有一套自己的快捷鍵，但是寫代碼的時候還是覺得不舒服，那是因為手總是在鍵盤和滑鼠之間切換，，，後來用了vim之後，才找到了屬於自己的編輯器，本人也是寫前端的，用vim插件也很多，各種功能完全不輸sublime，這個也看個人書寫習慣，另外鍵盤用的大神的hhkb寫起來真心的爽。

vim 覺得在 windows 下不爽吧，用 notepad++ 不好么？

推薦閱讀：

※在哪裡能看到大牛使用 vim 或者 Emacs 編程的視頻？
※vim中為什麼有那麼多map？nnoremap, vnoremap .....
※Vim 和 Emacs 到底哪個更牛逼一點？
※如何使用Notepad++和GCC搭建Windows下的C語言學習環境？
※為什麼 vim 在 insert 模式下粘貼大量文本時會崩潰？

TAG:前端開發 | Vim |