Web 开发中使用了 Vim 作为主编辑器之后......
脚本之家
你与百万开发者在一起
在选择编辑器时，想必很多人对 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开发项目的主编辑器时，做出的一些能够提高效率的定制。
1
作为Web程序员，大部分时间都在编写HTML、CSS和JavaScript文件，根据个人喜好或项目需要，你可能还会使用一些框架（如Angular、Vue或React）以及babel、webpack、grunt等各种工具。
我个人会尽可能减少插件的使用，仅在插件能带来非常大的好处，而且能真正改进工作流程的时候才会使用。
目前我安装的插件如下：
Emmet.vim
indentline和vim-jsx-pretty
vim-commentary
ALE（eslint和prettier）
2
Emmet是高速输入和编辑代码的绝佳工具，只需要输入一行代码就可以创建一整段复杂的HTML。
3
这两个插件可以改进Vim的视觉样式。indentline可以添加竖线来显示缩进级别，vim-jsx-pretty能给JSX代码添加高亮，很适合编写ReactJS等代码时使用。
4
vim-commentary
这个插件可以方便地注释掉一段代码或者取消注释，只需选中代码并键入<g-c>即可。
5
ALE（Asynchronous Lint Engine）可以调用linter和代码修整工具，极大地提高工作效率，属于那种不用不知道，用了绝对不后悔的插件。我使用ALE主要是为了调用prettier。
6
实时查看修改的效果能够极大地改善工作流程。很多React或Gatsby等项目已经内置了该功能，但如果仅仅是创建一个简单的网页（HTML、CSS和JavaScript），那么Atom、Brackets或VSCode等编辑器可以把编辑中的页面的实时预览并列显示在另一个窗口中。
像我这种爱钻牛角尖的人很希望在Vim中也使用该功能。尽管有几个插件能实现，但我决定选择另一种方式。
我决定实现一个不依赖于编辑器的方案。基本思路就是，运行一个本地服务器，监视文件的改动，每当文件更新时就刷新服务器上的页面。
听起来似乎很复杂，但实际上非常简单，只需要在项目文件夹中安装并运行browser-sync即可。
我假设你已经安装了nodejs，所以只需要在全局安装browser-sync。
npm install -g browser-sync安装完browser-sync之后，就能在任何文件夹中运行，创建一个本地服务器，然后自动显示文件夹内的index.html。
browser-sync start --server --files .如果你使用的是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】
更多精彩
在公众号后台对话框输入以下关键词
查看更多优质内容！
女朋友 | 大数据 | 运维 | 书单 | 算法
大数据 | JavaScript | Python | 黑客
AI | 人工智能 | 5G | 区块链
机器学习 | 数学 | 送书