使用 Vim 作为 Web 开发的主要编辑器

XKCD 的《真正的程序员》

找到最适合自己的代码编辑器或 IDE（从现在开始，我将同时指两者）是每个开发人员在学习编程的过程中都会经历的意想不到的成长过程之一。就我而言，我大约 9 年前开始学习 Python 编程，我记得每周都会从一个编辑器跳到另一个编辑器，第一个编辑器是 IDLE，而我记得尝试过 Boa Constructor、Komodo 和 Notepad++ 等等。

在寻找您喜欢的编辑器的过程中，您会了解编辑器之战，并开始了解有关 Vim 和 Emacs 的几个内部笑话。

正是在此时，您决定学习 Vim 或 Emacs，您的兔子洞之旅就开始了。

从这篇文章的标题来看，您已经猜到我喜欢的编辑器是 Vim，但我不会试图向您推销它，也不会说服您花费无数的时间修改您当前的开发环境以使其适应使用 Vim。

我写这篇文章的目的是为了分享我所实现的定制，以便有效地使用 Vim 作为我的 Web 开发项目的主要编辑器。

用于 Web 开发的 Vim 插件

作为一名 Web 开发人员，您大部分时间基本上都在处理 HTML、CSS 和 JavaScript 文件，并且根据您的偏好或您正在进行的项目的要求，您可能会使用一些框架（React、Vue 或 Angular）和各种工具，如 babel、webpack、grunt 等。

就我个人而言，我尝试使用尽可能少的插件，只有当它们带来的好处是切实的并且确实改善了我的工作流程时，我才会安装它们。

目前我安装的插件如下：

• Emmet.vim
• 缩进线和 vim-jsx-pretty
• vim 评论
• ALE（eslint 和 prettier）

Emmet.vim

Emmet 是一款出色的高速编码和编辑工具，它允许您用一行代码创建复杂的 HTML 结构。

缩进线和 vim-jsx-pretty

这是两个用于改善 Vim 视觉风格的插件。indentline添加垂直线以轻松显示缩进级别，并vim-jsx-pretty在您使用 ReactJS 等时突出显示 JSX 代码。

vim 评论

该插件允许您轻松地注释/取消注释代码，您只需选择所需的代码并按<gc>。

ALE（eslint 和 prettier）

ALE（异步 Lint 引擎）允许你使用 Linter 和修复工具，让你的工作更加轻松。它属于那种你不去尝试就会觉得用不上的工具。就我而言，我主要使用 ALE 来在使用 Vim 时启用Prettier。

实现实时预览（热重载）

实时观察所做修改的效果会对您的工作流程产生积极的影响，大多数情况下，当您在 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 中工作（您应该这样做），您可以创建一个别名来简化运行服务器的过程。打开.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"

谢谢阅读！