用于 Web 开发的 (Neo)vim

2025-06-10

用于 Web 开发的 (Neo)vim

我最近又开始想重新使用久经考验的 Vim 编辑器了。对于那些不熟悉 Vim 的人来说,它是一款于 1991 年首次发布的编辑器。Vim 拥有庞大的用户社区、丰富的插件和附加组件。大多数 Vim 用户都会对其编辑器进行大量的配置。这种自定义是 Vim 最棒的功能之一。然而,它也是最难掌握的。

为了确保我的 Vim 配置成功,我希望能够提供一些类似 IDE 的功能。例如“在项目中查找”、“跳转到文件”以及 linting / TypeScript 支持等功能都是必需的。本文将概述我如何设置 NeoVim (nvim) 来实现这些功能。

1)安装nvim

我使用 NeoVim (nvim) 而不是标准 vim。Neovim 是一款“基于 vim”的文本编辑器。它与标准 vim 相当兼容,但增加了一些插件可以实现的功能。

最好按照文档安装 nvim。在我的 Mac 上,我运行了

brew install --HEAD neovim
Enter fullscreen mode Exit fullscreen mode

2)安装 VimPlug

我使用 VimPlug 来管理我的插件。请查看安装文档。在我的设置中,我运行了以下命令:

curl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
Enter fullscreen mode Exit fullscreen mode

3)设置配置文件

默认情况下,nvim 的配置由 控制.config/nvim/init.vim。该文件可能包含 nvim 的所有配置选项。随着时间的推移,将配置放在一个文件中可能会变得难以处理。值得庆幸的是,您可以拆分 vim 配置文件,以便于管理。按照该指南init.vim,可以从其他配置文件加载配置。我有以下文件,但可以使用任意数量/名称的配置文件。

01.插件.vim

这是我放置所有插件安装信息的地方。

call plug#begin('~/.vim/plugged')
  " Plugins go here
call plug#end()
Enter fullscreen mode Exit fullscreen mode

02.设置.vim

此 settings.vim 包含我所有的标准 nvim 配置。

03.插件设置.vim

插件配置放在这个文件中。我本来想把它和插件安装分开,但从技术上来说,它可以和安装配置文件放在一起。

4)配置默认vim设置

我的 vim 设置在这里。这些设置大多是个人偏好。更多信息,请参阅 vim 配置指南

5)安装插件

有了这样的结构,一切就绪,就可以开始安装和配置插件了。可以使用 VimPlug 安装插件,只需Plug在插件的开始和结束函数之间放置一些语句即可。例如

Plug 'bling/vim-bufferline'
Enter fullscreen mode Exit fullscreen mode

配置完插件后,运行:PlugInstall安装插件。

我正在使用的几个插件是:

Ctrl+Vim

ctrlp 被描述为“Vim 的完整路径模糊文件、缓冲区、mru、标签等查找器”。我使用它的方式类似于我在 VS Code 中使用 Command+P 快速跳转到另一个文件的方式。

控制键

这个插件可以非常轻松地快速搜索代码库并在搜索结果视图中编辑文件。

征服完成

我使用这个插件来获取类似 VS Code 的智能感知信息。它的自动补全功能出奇地好。文档中还夸耀它支持与 VS Code 相同的语言协议。

Conquer of Completion 提供 TypeScript 和其他编程语言的补全源,可能需要单独安装。更多信息请参阅文档

麦酒

Ale 是“异步 Lint 引擎”的缩写。Ale 名副其实,在检查 JavaScript 代码库方面表现出色。

总结

虽然 vim 可能并不适合所有人,甚至可能不是我的主要编辑器,但它仍然是一种不错的代码编辑工具。我的配置文件可以在 GitHub 上找到

鏂囩珷鏉ユ簮锛�https://dev.to/ryanlanciaux/neo-vim-for-web-development-56n9
PREV
从烹饪界汲取灵感,实现更好的前端开发
NEXT
使用 Composer 时的 PHP 部署最佳实践