在選擇編輯器時，想必很多人對 vim 嗤之以鼻，但實際上，從一定角度來看，你也能發現别樣的風采。本文的目的并不在于強推薦大家使用 vim，而是通過作者将 Vim 作為 Web 開發項目的主編輯器案例中，讓我們發現一些不同之處。
作者 | Fidel Sanchez-Bueno
譯者 | 彎月，責編 | 屠敏
出品 | CSDN(ID：CSDNnews)
以下為譯文：
在學習程式設計的過程中，選擇最适合自己的編輯器或IDE(下文的編輯器指代兩者)是每個程式員都會經曆的過程。對于我而言，大約從9年前開始學習Python，我還記得當時每周都會換一種編輯器，一開始是IDLE，後來我記得還試過Boa Constructor、Komodo和Notepad++等。
在尋找最佳編輯器的過程中，你會了解到程式員之間的編輯器之戰，并且會對那些Vim和Emacs的笑話會心一笑。
也就是在這個時候，你會嘗試學習Vim或者Emacs，從此就開始了愛麗絲的探險之旅。
從這篇文章的标題就可以看出來，我選擇的編輯器是Vim，但我并沒打算向你推薦Vim，也不會去說服你花費無數時間，改變自己的開發環境來使用Vim。
這篇文章的目的是分享我在使用Vim作為Web開發項目的主編輯器時，做出的一些能夠提高效率的定制。
Web開發的Vim插件
作為Web程式員，大部分時間都在編寫HTML、CSS和JavaScript檔案，根據個人喜好或項目需要，你可能還會使用一些架構(如Angular、Vue或React)以及babel、webpack、grunt等各種工具。
我個人會盡可能減少插件的使用，僅在插件能帶來非常大的好處，而且能真正改進工作流程的時候才會使用。
目前我安裝的插件如下：
- Emmet.vim
- indentline和vim-jsx-pretty
- vim-commentary
- ALE(eslint和prettier)
Emmet.vim
Emmet是高速輸入和編輯代碼的絕佳工具，隻需要輸入一行代碼就可以建立一整段複雜的HTML。
indentline和vim-jsx-pretty
這兩個插件可以改進Vim的視覺樣式。indentline可以添加豎線來顯示縮進級别，vim-jsx-pretty能給JSX代碼添加高亮，很适合編寫ReactJS等代碼時使用。
vim-commentary
這個插件可以友善地注釋掉一段代碼或者取消注釋，隻需選中代碼并鍵入即可。
ALE(eslint和prettier)
ALE(Asynchronous Lint Engine)可以調用linter和代碼修整工具，極大地提高工作效率，屬于那種不用不知道，用了絕對不後悔的插件。我使用ALE主要是為了調用prettier。
實時預覽(熱重載)
實時檢視修改的效果能夠極大地改善工作流程。很多React或Gatsby等項目已經内置了該功能，但如果僅僅是建立一個簡單的網頁(HTML、CSS和JavaScript)，那麼Atom、Brackets或VSCode等編輯器可以把編輯中的頁面的實時預覽并列顯示在另一個視窗中。
像我這種愛鑽牛角尖的人很希望在Vim中也使用該功能。盡管有幾個插件能實作，但我決定選擇另一種方式。
我決定實作一個不依賴于編輯器的方案。基本思路就是，運作一個本地伺服器，監視檔案的改動，每當檔案更新時就重新整理伺服器上的頁面。
聽起來似乎很複雜，但實際上非常簡單，隻需要在項目檔案夾中安裝并運作browser-sync即可。
我假設你已經安裝了nodejs，是以隻需要在全局安裝browser-sync。
安裝完browser-sync之後，就能在任何檔案夾中運作，建立一個本地伺服器，然後自動顯示檔案夾内的index.html。
如果你使用的是Linux，bane可以建立一個别名來簡化啟動伺服器的過程。打開主目錄下的.bashrc檔案，添加如下内容：
# Command line alias to start the browser-sync server
alias serve="browser-sync start --server --files ."
我更進一步，允許區域網路内的其他機器通路我的伺服器，這樣就能在别的裝置上進行測試：
# browser-sync config
# Get the current local IP address
export SERVER_IP=`hostname -I`
# The command alias to start the browser-sync server
alias serve="browser-sync start --server --files . --no-notify --host $SERVER_IP --port 9000"
感謝閱讀！
原文：https://dev.to/fidelve/using-vim-as-your-main-editor-for-web-development-5a73
作者：Fidel Sanchez-Bueno，化學工程師，自學成才的程式員。
本文為 CSDN 翻譯，轉載請注明來源出處。
【End】