作为一个前端开发,用得最多的两类软件应该就是编辑器和浏览器了。编辑器我们有 VSCode、Vim,浏览器我们会选择 Chrome。那有没有可能在 Chrome 中使用 Vim?借助 Vim 的快捷键来提升浏览体验?有,这就是今天要介绍的 Vimium 插件。
Vimium 是一个 Chrome 插件,下载地址。如何安装不赘言了,我会介绍自己每天都在用的一些功能,这些功能让我在使用 Chrome 的时候完全离不开它。
在安装 Vimium 插件后,打开任意一个网页,在光标不在地址栏或页面中某个输入框的时候,按 ? 号会弹出
Vimium Help 弹窗,上面列出了默认的所有基础快捷键,如下所示:

点击右下角的 Show advanced commands 可以展开更多高级的命令。
点击右上角的 Options,可以打开 Vimium 插件的配置页面,如下所示:

你可以对 Vimum 插件做一些适当的配置。比如有一些页面本身会有一些快捷键,这些快捷键会和 Vimuim
有冲突,所以你可以选择在该页面中全部或部分禁用 Vimium。它支持通过 Pattern 匹配
url,比如这里我禁止了在 repl.it 中使用 Vimium,它的 Pattern 如下:
https?://repl.it/*你还可以通过 Keys 字段来选择禁止部分快捷键,如果这个字段不设置,默认会在该 url 匹配的网页中禁止 Vimuim 的全部命令。
另外,和 .vimrc 中的 map 类似,如果你想自定义某些快捷键,可以使用上面的 Custom key mappings
设置。
最后你还能通过 Custom search engines 设置 Vimium 插件 vomnibar(搜索框,下面会提到)的搜索引擎。
f 和 F在当前页面中,按下 f 键,你会发现所有的链接都被标记了对应的字母或字母组合,如下所示:

输入对应的字母或字母组合,比如上面的 A(不区分大小写),就可以在当前 tab 打开 Better Programming 在 Medium
上的主页。是不是非常地便捷、非常地爽?如果你想在新
tab 打开页面,可以使用大写的 F 命令。
j、k、h、l、gg、G这些命令和 vim 中是一致的。所以很容易上手:
j:向下滚动页面k:向上滚动页面h:向左滚动页面l:向右滚动页面gg:滚动到页面的顶部G:滚动到页面的底部有了这些命令,你浏览网页的体验会好很多,也高效很多,完全不需要再借助鼠标滚动页面。
r相比于使用 f5(离手远盲打定位难)、或者使用 Command + R,只需要按一下 r
就刷新页面,体验要好很多,也可以彻底嫌弃操作鼠标去刷新页面。
yy、p、P操作 url 是使用浏览器时常见的需求。比如我想复制浏览器中长长的 url
要怎么做?以前要操作鼠标,定位到地址栏,然后右键复制。现在你只需要键盘敲击 yy,就能快速复制 url
地址了。
复制了 url 以后,想打开一个tab,又用鼠标?不需要,只需要敲击 p,就会在当前 tab 打开剪贴板中的
url。或者使用大写的 P 在新的 tab 中打开该地址。
o、O、b、B、T如果想快速打开一个 url、书签或历史记录,可以使用 o 命令,效果如下:

它会在你的历史记录、书签、当前打开 tab
中搜索和关键词匹配的页面,方便快速打开对应页面。同样的,默认在当前 tab 打开页面,可以使用大写的 O
命令在新 tab 中打开搜索结果的页面。如果你输入了完整的 url,可以直接回车打开对应的页面。
如果你只想搜索书签中的页面,可以使用 b 或者 B 命令,大小写的含义和上面介绍的几个命令一样。
如果你想快速切换到已经打开的某个 tab 页,可以使用 T 命令,试试吧,你会感觉非常爽的。
H、LH:回退到历史中的上一个页面L:前进到历史中的下一个页面t、J、K、g0、g$、yt、x、X以下这些命令都和 tabs 操作有关,花点时间熟练掌握后 tabs 操作效率会高出不止一倍。
t:打开新 tabJ:切到左边的 tabK:切到右边的 tabg0 :切到第一个 tabg$:切到最后一个 tabyt:在另一个 tab 打开当前页面(复制当前 tab)x:关闭当前 tabX:恢复最近关闭的 tab好了,Vimium 常用的命令就介绍到这,但知道不等于能熟练使用。建议可以花一点时间熟悉一下上面的命令,以后它会帮你节省更多的时间。也许更重要的是,因为这些看似细枝末节微不足道的体验提升,会让你更容易进入一种工作、学习的心流状态,帮助你更高效地吸收、更高效地输出。希望你能愉快地使用 Vimium。