首发于码路拾遗
从 Emacs 和 Vim 到 VSCode

从 Emacs 和 Vim 到 VSCode

在很长一段时间里,我都在使用 Emacs 作为我的主力编辑器,所用到的 配置 后来则主要是基于 子龙山人 以及他的 Spacemacs-rocks 系列 ,这些配置文件经过碎月累年的魔改和持续发酵,伴随十数个各种语言的轻量级前后端项目的洗礼,已经像一个隐形的纹身一样成为了我日常生活的一部分。

对于文本编辑器,我的热情由来已久,从大学宿舍到结婚生子的这些年也接触过不少:Vim、WebStorm,Emacs,Sublime,RubyMine 等等,她们或纯粹,或集成,或性感,或智能,每一位都有着令人难忘的鲜明特色,在漫漫编程路上给了我无数的美好回忆和默默陪伴。她们所带给我的影响也不仅仅局限在平时的编码中,而且潜移默化的给我注入了一个重要的价值观 -- 不仅要赢,还要赢的漂亮(好吧这其实是巴萨教给我的。。)

尽管选择众多,但这其中的佼佼者在我心目中则毫无争议的属于"上古时代"的 Emacs 和 vim(Emacs 排在前面仅仅因为我觉得她听上去更加性感,特此说明),两个编辑器的背后都是极富传奇甚至哲学色彩的程序员,且至今影响深远 --- 比如 mac 系统上几乎任何软件的默认快捷键很多就继承自 Emacs (例如 c-f, c-b, c-w, c-k, c-h, c-d, c-p, c-n, c-a, c-e 等等),再比如几乎所有的主流编辑器也都有 vim/emacs 的模拟模式可选等等。前几年出现的 Spacemacs 项目 更是将两者合二为一,妙之毫巅,就像其在仓库标题里所提到的一样:

The best editor is neither Emacs nor Vim, it's Emacs *and* Vim!

那你为啥子要换 VSCode 呢?

最直接的原因是 Spacemacs 这个项目在至少在两年多以前就没有在 master 分支提交过任何代码了,日常 bug/feature 等等都在 develop 分支上,且迟迟没有合并的迹象:

Plans to merge `dev` into `master`? · Issue #12418 · syl20bnr/spacemacsgithub.com图标

我之前一直在忙于个人项目,直到一年多以前发现这个问题,之后曾经尝试手动切换到 develop 分支,结果各种乱起乱七八糟的报错连自定义的主题都直接乱掉,尝试修复又无从谈起,毕竟已经落后了几千个 commit 了。。更重要的是,她让我的 Emacs 配置变成了一潭死水,在可预见的很长一段时间内都无法和社区保持同步、keep sharp了,这种感觉实在糟透了。

年后来到新公司坐班,发现现在搞前端的年轻人都在使用 VSCode ,而且无一例外,失望之余也不免心生好奇,这花里胡哨的东西究竟好在哪里?在又一次尝试 Spacemacs 下的某个新插件 碰壁后 的某个下午,我觉得是时候 give it a try 了。

VSCode 最初印象

  • 很顺滑,这是最直观的印象。

在 Emacs(70年代中期) 和 Vim(80年代末期) 诞生的那个古典年代,鼠标并不是个很普及的东西 -- 如果已经出现了的话,所以在她们的世界中,一切输入操作都是要以键盘完成的。直到今天,即使 Emacs 和 Vim 在各个平台上都有了自己的 GUI 的封装,但是你若用鼠标去完成某个操作还是非常蹩脚和低效的(比如拿鼠标翻页?),和后来的编辑器相比,一点都不“现代”。

VSCode 这方面要好上很多,尤其是你如果在 mac 上使用的话, touchpad 很好用并且就在键盘下方,做很多操作就 "方便" 了很多,据我观察,我们前端组里多数人甚至连基本的上下左右移动都是用手指在 touchpad 上完成的,经常把我看走神 -- 这种感觉就像是直接拿手指而不是用餐具去吃东西一样,不是说吃不到嘴里,就是感觉怪怪的。。扯远了,这不是重点。。

  • 另一大印象就是简洁、默认功能强大。

相比其他的文本编辑器,VSCode 的默认配置已经很全面了,上手即用,几乎没有肉眼可见的学习门槛。

基础配置

我的目标基本是把 VSCode 配置成我一直在用的 Spacemacs 的样子,主要包括快捷键和操作习惯等,力争能取众家之长取悦于己。概括来讲主要是三点,

  • 配置基本快捷键:使用 vim 的正常模式作为默认配置,在进入到 vim 的编辑模式下则使用 Emacs 的快捷键。
  • 配置功能快捷键: 使用 spacemacs 的模式配置功能型快捷键
  • 隐藏不必要的花哨元素:比如 tabbar, sidebar,mini-map 等等平时基本用不到但又占空间的的东西。


  • 配置基本快捷键

虽然说了半天 Emacs, 虽然刚开始接触 vim 的时候敲了半天键盘一个字符都没输进去还重启了好几次电脑,但不得不承认 vim 的在行间移动以及三种模式的理念是极其高效的。不出所料的,VSCode 上有很成熟的 vim 插件:

Vim - Visual Studio Marketplacemarketplace.visualstudio.com图标

但是 vim 有个"缺点",就是在插入模式下不能很好的使用其他模式的快捷键,比如在插入模式下,不能方便的上下左右行移动光标,必须要退出到 Normal 模式下才行,虽然可以绑定诸如 "jj", "fd" 等等方便的退出插入模式,我个人还是倾向于在插入模式下使用快捷键来做这些动作,具体如下:

  • 插入模式下使用 Emacs 的快捷键,比如 c-f, c-b, c-p, c-n 分别对应向前,向后,向上,和向下移动光标,比如 c-a, c-e, c-w, c-b 分别对应行首,行末,删除词/字,c-g 取消各种操作,弹窗提示等等。
  • 在正常的模式下模式使用 vim 的移动快捷键。

同时,我还结合自己的一些习惯绑定了在 vim normal 模式下增强了一些快捷键,比如在原有的 jk 移动基础上添加了 c-j, c-k 的操作,配合 vim 自带的 H,M,L 几乎可以迅速的移动到可视区的任何位置:

// settings.json
  {
      "before": [
        "ctrl+j"
      ],
      "after": [
        "j",
        "j",
        "j"
      ]
    },
    {
      "before": [
        "ctrl+k"
      ],
      "after": [
        "k",
        "k",
        "k"
      ]
    },
按一下顶过去按3下https://www.zhihu.com/video/1138391398238785536

作为补充,c-p,c-n 在正常模式下被映射为向上和向下翻页。

  • 配置功能快捷键

如前所述,在使用 VSCode 之前我用过很长一段时间的 Spacemacs 配置,她给我留下最深刻的印象就是优雅巧妙的区分了功能快捷键,具体操作就是将 vim 的 leader-key 绑定到 "space(空格)",然后将紧接着的按键作为"子菜单入口"进入各种功能区。比如在 Spacemacs 中,按 space-f-s 保存当前文件,space-f-r 打开最近使用的文件等等。

实际上,你可以在按 space-f 后稍做停顿查看提示,你会发现这里全都是和 f(file) 相关的操作:

类似的,你可以使用 space-g- 执行所有和 g(git) 相关的操作:

如果你一看开始不知道干什么,可以直接按 Space,稍作停留后查看所有功能区的入口:

f-文件相关的操作,p-项目相关的操作,t-toggle相关功能等等,一旦你熟悉了她符合直觉命名,你几乎可以想当然的摸索出任何功能的快捷键,且非常高效和优雅,而不是依靠所谓的肌肉记忆和坑长的文档。。

得益于 VSCode 强大的扩展功能,我也照猫画虎的绑定了一些常见的操作:

{
  "vim.leader": "<space>", // 首先绑定 leader 键到空格
  // 绑定文件相关操作
  {
    "before": ["<leader>","f","S"],
    "commands": ["workbench.action.files.saveAll"]
  },
  {
    "before": ["<leader>","f","C"],
    "commands": ["workbench.files.action.collapseExplorerFolders"]
  }, 
  // ...

  // 绑定项目相关操作
  {
    "before": ["<leader>","p","p"],
    "commands": ["projectManager.listProjects"]
  },
  {
    "before": ["<leader>","p","e"],
    "commands": ["projectManager.editProjects"]
  },

   // ....
   // ....

}

将常用的功能快捷键按照 spacemacs 的方式整理以后,基本满足了我日常的开发需求,当然很多细节还是有差距,比如 git 操作等等 (emacs 的 magit 实在是太好用了,名字也很好听,相比之下 VSCode 里主流的 gitlens, 感觉就是个花瓶。。)

  • 隐藏不必要的花哨元素

根据我自己的撸码习惯,sidebar,mini-map,tab-bar,active-bar 等等都是十分多余的东西,平时基本都用不到,所以平时我都把他们隐藏起来了,最终大概是这个样子:

插件列表

五花八门的插件可能 VSCode 中最亮眼的风景了,基于 VSCode 这个强悍的深度优化的 web 平台和海量开发者,这些插件在实用之余往往还十分养眼,让人对乔布斯口中那个 "没有设计基因" 的巨硬刮目相看。

我目前所使用的所有插件截图如下:


这些插件大多或看名字就知道用途,或非常流行各种介绍铺天盖地,我就不过多赘述了,我捡几个相对比较"冷门"的一点的聊聊:

说实在的这么实用的功能居然这么少的下载量我是一直没想明白,以至于我是唯一一个留言的用户。。

她的功能很实用,可以让你用命令迅速切换到上一个使用的 "editor" (类似于 emacs 里的 buffer), 我把她绑定到了 SPC-Tab。

我不知道其他大多数 VSCode 是怎么执行类似操作的?比如我在同时编写一个模块的 A, B 文件,需要来回切换,我所知只有三种办法:

  1. 使用 quick-pannel 重新检索之前的文件?
  2. 使用 opend-editors 命令列出打开的所有 editor ?
  3. 在 sidebar 里用鼠标点?

第1,3种办法是在太粗暴了,我之前使用的是第二种,但是这个办法列出的所有 editors 并不会把最近打开使用的排在最前面,非常迷,也非常低效。

这个插件可以让 VSCode 加载你自定义的 css/js,从而实现一些你想要的,但是目前又没有提供配置选项的功能。比如觉得 VScode 的启动界面实在太难看啰嗦了,你完全可以像调试普通 web 程序一样自定义她:

又比如 VSCode 的多功能搜索框总是在屏幕最上方,在大屏幕上恨不符合我的习惯,你可以用这个插件自定义她的位置:

可以迅速查看剪切板历史,很实用,很常用。同时建议将她默认的配置关闭:

  "clipboard-manager.preview": false,  // 不预览条目
  "clipboard-manager.snippet.enabled": false, // 不去管理 snippets

字如其意,我自己 mac 上的 menu bar 并不是一直 fixed 在顶部的,所以有时候想看个时间还得把鼠标移上去或者甚至看一眼手机。。 有了这个就方便多了。

文件操作相关,可以在 quick-panel 里用命令执行相关操作。我个人一般是关闭 sidebar 的,撸码的时候也不太喜欢用鼠标,在我看来这是很打断思路的行为。这个插件很好的满足了我。

做幻灯片演示的时候很有用处,可以将当前选中的代码块导出成 png 文件。

让 titlebar 不要那么突兀

不突兀的文件类型图标,不会让你分心,不喧宾夺主。

作为糟糕的对比,可以看看其他 icon 是怎么做的:

这些图标在暗色背景下往往非常突兀,虽然乍一看很吸引眼球,典型的花哨有余,实用不足。。


最后附上我的配置,平时的配置是用 code-settings-sync 做的,但是设计私有 token,不方便分享,所以我在 github 上又同步了一份 (可能会有滞后),同时,本文也在持续完善中,欢迎各位 VSCoder 一起交流。

mydearxym/vscode-backupgithub.com图标

编辑于 2019-09-14

文章被以下专栏收录