Web 开发中使用了 Vim 作为主编辑器之后......

IT服务圈儿

有温度、有态度的IT自媒体平台

在选择编辑器时，想必很多人对 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开发项目的主编辑器时，做出的一些能够提高效率的定制。

01

Web开发的Vim插件

作为Web程序员，大部分时间都在编写HTML、CSS和JavaScript文件，根据个人喜好或项目需要，你可能还会使用一些框架（如Angular、Vue或React）以及babel、webpack、grunt等各种工具。

我个人会尽可能减少插件的使用，仅在插件能带来非常大的好处，而且能真正改进工作流程的时候才会使用。

目前我安装的插件如下： 

• Emmet.vim

• indentline和vim-jsx-pretty

• vim-commentary

• ALE（eslint和prettier）

02

Emmet.vim

Emmet是高速输入和编辑代码的绝佳工具，只需要输入一行代码就可以创建一整段复杂的HTML。

03

indentline和vim-jsx-pretty

这两个插件可以改进Vim的视觉样式。indentline可以添加竖线来显示缩进级别，vim-jsx-pretty能给JSX代码添加高亮，很适合编写ReactJS等代码时使用。

04

vim-commentary

这个插件可以方便地注释掉一段代码或者取消注释，只需选中代码并键入<g-c>即可。

05

ALE（eslint和prettier）

ALE（Asynchronous Lint Engine）可以调用linter和代码修整工具，极大地提高工作效率，属于那种不用不知道，用了绝对不后悔的插件。我使用ALE主要是为了调用prettier。

06

实时预览（热重载）

实时查看修改的效果能够极大地改善工作流程。很多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 翻译，转载请注明来源出处。 

*版权声明：转载文章和图片均来自公开网络，版权归作者本人所有，推送文章除非无法确认，我们都会注明作者和来源。如果出处有误或侵犯到原作者权益，请与我们联系删除或授权事宜。