用于 JavaScript 开发的 Neovim 和 Tmux

使用 Neovim 和 Tmux 快速浏览

以下是使用 Neovim 和 Tmux 浏览多个项目和文件的 2 分钟快速导览。我展示了一些我经常使用的方便的 Neovim 插件，以及我为 JavaScript 和 TypeScript 开发安装的本机 LSP 功能。

前端大师 VIM 课程

回到2021年5月，我完成了VIM基础（4小时14分），当然在前端大师的@ThePrimeagen。材料的能量和知识的深度是巨大的。本课程开始了我使用 Neovim 作为主要编辑器的工作和个人用途。

Neovim 是什么？

Neovim最初是 Vim v7 的一个分支。Neovim 的一些有趣的区别是它内置的 LSP（语言服务器协议）支持和 Lua 作为嵌入式语言，它是 Vimscript 的替代品。还有更多的功能，你可以看看他们的网站上。

有趣的是，Neovim 在 Stackoverflow 2021 年最受欢迎的协作工具开发者调查中排名第一！

为什么 Neovim 如此受欢迎？好吧，在The Changlog的最近播客中- 第 457 集名为“为什么是 Neovim？, TJ DeVries ( @TeejDeVries ) 与主持人Jerod Santo ( @jerodsanto ) 和Nick Nisi ( @nicknisi ) 讨论了背景故事以及 Neovim 非常酷的原因。

为 JavaScript 设置 Neovim

安装 Neovim

我个人习惯于brew安装我的大部分应用程序，但如果您不使用 macOS（或更喜欢其他方法），则可以在主要的Neovim wiki上安装很多选项。

brew install neovim

注意：我的<leader>密钥映射到<space>密钥（更准确let mapleader = " "）

有用的 Vim 插件

有多种方法可以管理 vim 插件，但我一直在使用vim-plug，它非常适合我的需求。我最近了解到的一个功能是你可以D在你之后输入PlugUpdate，它会显示每个插件更新中包含的提交的详细列表。

语言服务器协议

LSP 使 Neovim 能够与您选择的语言进行强大的集成。我使用typescript-language-server，它是 TypeScript 包装的实现tsserver。

• nvim-lspconfig - Neovim 内置语言服务器协议的常用配置集合
• nvim- compe - 用 Lua 编写的 Neovim 自动完成插件
• lspsaga.nvim - 基于 Neovim 的 LSP 的轻量级 LSP 插件，具有高性能 UI（代码操作、悬停文档、签名帮助、重命名、预览定义、浮动终端等...）
• 麻烦.nvim - 一个漂亮的列表，用于显示诊断、参考、望远镜结果、快速修复和位置列表，以帮助您解决代码引起的所有问题。

常用命令

关于 LSP，您可以调用很多命令，但以下是我经常使用的一些命令。

• gd - 转到定义
• gf - 转到文件位置
• K - 显示悬停文档
• <leader>ca - 启动代码操作

文件管理

如果我熟悉代码库，那么模糊文件查找器很棒，但有时我喜欢使用文件树插件来了解文件和文件夹如何相互关联。此外，望远镜还提供了其他导航方式（全局 grep、git status 等...）。

• 望远镜.nvim - 列表上高度可扩展的模糊查找器。这可以查找文件、实时 grep、管理缓冲区、搜索 git 文件、文件浏览器、更改主题等等！
• 望远镜-fzf-native.nvim -fzf用于覆盖文件排序器的望远镜扩展
• nvim-tree.lua - 用 Lua 编写的 Neovim文件浏览器

常用命令

望远镜中还有更多可用的内置列表（以及您可以通过插件或自己添加的其他列表），但以下是我经常使用的列表。

• <leader>ff - 望远镜在项目中查找文件
• <leader>fg - 跨项目望远镜实时grep
• <leader>fc - 通过 git status 进行望远镜查找已更改
• <leader>fs - 望远镜导航文件系统
• <leader>fb - 活动缓冲区之间的望远镜切换
• <C-n>- 切换文件树（特定于nvim-tree.lua）

注意：以上是自定义重映射。您可以init.vim从我的 dotfiles 存储库中查看我的内容。

状态行

这些插件为 Neovim 提供了一些不错的风格和附加功能。有很多选择可供选择，但这些是我暂时选择的。

• lualine.nvim - 用 Lua 编写的快速且易于配置的 Neovim 状态行
• nvim-bufferline.lua - 使用 Lua 构建的 Neovim的时髦缓冲线
• nvim-web-devicons -vim-devicons的 Lua 端口，可为您的插件添加精美图标

语法高亮

我使用我nvim-treesitter的大部分 sytnax 突出显示需求。vim-jsx-pretty在使用 JSX 时，我确实用来填补一些行为空白，但仅此而已。我缺乏的两个方面是对styled-components和 的支持mdx。

• nvim-treesitter - 提供一种在 Neovim 中使用tree- sitter 的简单方法。这提供了基本功能，例如突出显示。
• vim-jsx-pretty -nvim-treesitter目前 JSX 的缩进效果不是很好，所以我使用这个插件来帮助填补这个空白。

Tim Pope 插件

Tim Pope ( @tpope ) 拥有大量有用的 vim 插件，这些插件是他多年来开发的。以下是我使用的一些。

• vim-unimpaired - 一个方便的插件，为许多常见操作（导航缓冲区、快速列表等）提供一套映射对。
• vim-surround - 一个很好的插件来包围文本（带有括号，括号，引号，标签等）或替换或删除这些分隔符。
• vim-commentary - 轻松注释或取消注释一行代码或运动目标。
• vim-repeat - 该插件允许其他插件使用该.命令重复上一个命令。
• VIM-侦探-这个插件会自动调整shiftwidth，并expandtab根据当前文件的设置或同一类型的文件。

杂项插件

上图为dashboard-nvim插件。这是一个更友好的闪屏与 Neovim 原生的相比。我还列出了其他几个我觉得有用的插件。

• 仪表板-nvim - 带有常用命令列表的 vim 启动仪表板
• gitsigns.nvim - Lua 实现的gutter 中显示的超快速 git 装饰
• neoscroll.nvim - 用 Lua 编写的平滑滚动 Neovim 插件。滚动显示出来了<C-u>，C-d>，<C-b>，<C-f>，<C-e>，zt，zz，和zb
• nvim-colorizer.lua - 用 Lua 编写的 Neovim 的高性能颜色荧光笔
• nvim-autopairs - Neovim 的强大自动配对插件
• vim-highlightedyank - 简要突出 yanged 区域

注意：jdhao ( @flying_unclecat ) 在Twitter 上联系我，让我知道我不再需要上面列出的vim-highlightedyank插件。Neovim 现在可以支持相同的行为 vim.highlight.on_yank！

主题

我主要使用 Dracula 主题，因为它可用于 vim 和 tmux，而且我喜欢它的一致性和颜色选择。

• dracula - Vim 的黑暗主题。

Vim 学习资源

网上有一些很棒的免费学习材料vim。下面列出了一些我非常喜欢的视频：

• 匝道Vim的教导由本·奥伦斯坦（@ r00k）和克里斯·图梅（@christoomey），并提供@thoughtbot
• 深入了解由 Drew Neil 教授并由@thoughtbot提供的Neovim
• Vimcasts由教德鲁尼尔（@nelstrom）
• 掌握Chris Toomey ( @christoomey )教授的 Vim 语言
• 一周内学习 Vim，由Mike Coutermarsh教授
• Max Cantor 教授如何完成 90% 的插件功能（仅使用 Vim）
• Jaime González García ( @Vintharas )编写的探索 Vim 系列和5 分钟 Vim 系列

在他的博客上！

有用的 Vim 备忘单

我看过无数的 Vim 备忘单，但以下是我发现有帮助的列表。

• VIM的cheatsheet通过devhints
• Dash Vim备忘单，由Kapeli的Dash制造商提供
• Vim的小抄由理查德Torruellas（@richardiii）
• VIM的cheatsheet通过QuickRef.ME
• 可搜索的cheatsheet使用望远镜在编辑器中插入了对Neovim

社会资源

在我学习 Vim 和 Neovim 的过程中，我在 Twitter、YouTube 和 Twitch 上关注了以下人员。他们拥有丰富的知识，我继续向他们学习。谢谢！

• Christian Chiarulli ( @chrisatmachine ) - LunarVim 的作者
• TJ DeVries ( @TeejDeVries ) - Neovim 核心成员，Streamer
• Jaime González García ( @Vintharas ) - Goolge 工程师、Vim 爱好者和博主
• Greg Hurrell ( @wincent ) - YouTube 上的伟大 Vim 视频系列
• Drew Neil ( @nelstrom ) - Vimcasts 的作者
• ThePrimeagen ( @theprimeagen ) - Netflix 工程师，Streamer
• Chris Toomey ( @christoomey ) - 很棒的 Vim 和 Tmux 学习资源

从终端学习

然后是vimtutor，如果我不提到它，我就会失职。您可以从终端执行交互式 vim 教程，您可以了解大量有关使用 vim 的信息。

为控制台管理设置 Tmux

我发现使用tmux是对neovim. 我通常tmux每个项目都有一个会话，每个项目都有多个窗口。我倾向于每个项目至少有 4 个窗口；一个neovim运行窗口，一个为该项目运行服务器的窗口，一个与 git 交互的窗口，以及一个用于运行各种终端命令的临时窗口。

安装 Tmux

brew install tmux

注意：我的tmux前缀映射到<ctrl><space>（更准确地set -g prefix C-Space）

常见的 Tmux 命令

上图显示了 tmux 会话和窗口之间的切换 <ctrl><space>w。以下是我在编码时使用的一些常用命令。

• <ctrl><space>w - 列出所有 tmux 会话和窗口
• <ctrl><space>d - 从 tmux 分离到终端提示
• <ctrl><space>r - 从配置文件重新加载 tmux
• tmux kill-session - 终止您所在的当前 tmux 会话
• tmux kill-server - 杀死 tmux 服务器（杀死所有打开的会话）
• tmux attach-session -t blog - 附加到现有的 tmux 会话
• tmux ls - 列出所有 tmux
• <ctrl><space>| - 创建一个新的水平分割
• <ctrl><space>- - 创建一个新的垂直分割
• <ctrl><space>? - 列出帮助命令

注意：您可以.tmux.conf从我的 dotfiles 存储库中查看我的自定义。

有用的 Tmux 备忘单

以下是一些特定于 tmux 的备忘单，当我浏览 tmux 并尝试许多功能时，我发现它们非常有用。

• 为的cheatsheet TMUX通过devhints
• Tmux 备忘单和快速参考
• 短跑TMUX的cheatsheet通过Kapeli制造商短跑

有用的 Tmux 插件

就像你可以有插件一样vim，你也可以有插件tmux。我使用的插件管理器叫做tpm.

安装 的首选方法tpm是将 repo 克隆到您的机器上的隐藏.tmux文件夹中。

git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm

Tmux 插件

除了吸血鬼题材提供样式和颜色，还提供了几个插件显示battery，cpu-usage，gpu-usage，ram-usage， network，network-bandwith，weather，和time。我通常只设置 cpu-usage ram-usage time（如其他屏幕截图所示），但上图显示了一些其他设置。

• tmux-sensible - 您可能应该设置的一组合理的 tmux 选项
• vim-tmux-navigator - 允许您使用一组一致的热键在 vim 和 tmux 拆分之间无缝导航。
• tmux-vi-navigation - tmux 导航的简化快捷方式
• tmux-fzf-url - 一个 tmux 插件，用于在没有鼠标的情况下从浏览器快速打开 url。
• dracula - tmux 的黑暗主题

Vim 插件

• vim-tmux-navigator - 这个vim插件与vim-tmux-navigator上面列出的tmux 插件一起工作。

其他学习资源

• TMUX教由克里斯·图米（@christoomey），并提供@thoughtbot

有用的 Bash 程序

而不是手动创建 tmux 会话、重命名它们、设置自定义窗口等......我采用了tatthoughtbot 开发的bash 程序并进行了自己的调整。

当tat在调用它会创建一个会话TMUX并将其命名为当前文件夹的名称。然后它将创建一组定义的窗口和布局。由于这个程序，我很少手动创建会话或窗口。

Kitty 或 Alacritty

我开始使用 iTerm2，但发现在单独使用 Tmux 和 Neovim 时，终端中的重绘速度并不是我想要的。

值得庆幸的是，您可以使用 2 个基于 GPU 的终端模拟器来帮助加快渲染速度。我目前安装了Kitty和Alacritty。每个都有其优点和缺点，但两者都是更快速渲染的不错选择。我通常坚持使用 Kitty，因为它有连字支持。

brew install --cask kitty
brew install --cask alacritty

找个朋友加入你

我工作的地方有很多不同的开发团队。我在我的前端消防团队中领导着一个由 3 名开发人员组成的小团队。我们决定一起冒险使用neovim和tmux。

一起踏上这段旅程，让这段经历变得更加有趣。我们定期分享我们正在学习的东西，当我们进行配对会议时，以下问题或陈述很常见……

作为配对会话的驱动程序

• 我发现了一个很棒的插件/设置，让我告诉你！
• 让我们再次尝试这样做，但要更有效。

作为配对会话的查看者

• 哇，你刚刚做了什么？
• 你是怎么做到的？
• 那是什么设置/插件？
• 您是否考虑过尝试 XYZ？

我们还将花时间暂停并尝试找出更好的导航方式或进行一系列编辑，以推动自己变得更有效率。

我的点文件

请随意查看我的dotfiles，了解我目前如何设置我的环境。

评论和分享

如果您发现此帖子有帮助，请考虑在 Twitter 上分享该帖子或加入对话。

你是如何设置你的环境的？你有什么特别的插件或设置想要分享吗？如果是这样，我很想听听它！