![e8ec30156616439e85c36458e593783b.png](https://i-blog.csdnimg.cn/blog_migrate/ae4debb8d43316c0091afa4530475dfb.jpeg)
在很长一段时间里,我都在使用 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![4c89f87141280104eecc519c28f5efa5.png](https://i-blog.csdnimg.cn/blog_migrate/67eca54e0953f37d0385bbce85ae17aa.jpeg)
我之前一直在忙于个人项目,直到一年多以前发现这个问题,之后曾经尝试手动切换到 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![dc89fdfb33fa8e764fc874221a11f00d.png](https://i-blog.csdnimg.cn/blog_migrate/47515cba51f819fbd53fdd4f924ae21b.jpeg)
但是 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 几乎可以迅速的移动到可视区的任何位置:
//
![7ac58124fa880fcfbe12b7cda01ef6de.png](https://i-blog.csdnimg.cn/blog_migrate/dd27c1afb4cdb47e2227f820ff011c49.jpeg)
作为补充,c-p,c-n 在正常模式下被映射为向上和向下翻页。
- 配置功能快捷键
如前所述,在使用 VSCode 之前我用过很长一段时间的 Spacemacs 配置,她给我留下最深刻的印象就是优雅巧妙的区分了功能快捷键,具体操作就是将 vim 的 leader-key 绑定到 "space(空格)",然后将紧接着的按键作为"子菜单入口"进入各种功能区。比如在 Spacemacs 中,按 space-f-s 保存当前文件,space-f-r 打开最近使用的文件等等。
实际上,你可以在按 space-f 后稍做停顿查看提示,你会发现这里全都是和 f(file) 相关的操作:
![5f1c22e86f156415fb0cf634f0e512b7.png](https://i-blog.csdnimg.cn/blog_migrate/65e402790efefc3b8e0e8490bdaaa62e.jpeg)
类似的,你可以使用 space-g- 执行所有和 g(git) 相关的操作:
![6b5a6e054a096e68cdabb17cd74a8965.png](https://i-blog.csdnimg.cn/blog_migrate/4fb6dbf70da384cf7ece3658dc1d91b7.png)
如果你一看开始不知道干什么,可以直接按 Space,稍作停留后查看所有功能区的入口:
![1b6f6edfc9f18ef8293c20c6b14b6374.png](https://i-blog.csdnimg.cn/blog_migrate/6fc5f510f935db4180403cd85571b1cd.jpeg)
f-文件相关的操作,p-项目相关的操作,t-toggle相关功能等等,一旦你熟悉了她符合直觉命名,你几乎可以想当然的摸索出任何功能的快捷键,且非常高效和优雅,而不是依靠所谓的肌肉记忆和坑长的文档。。
得益于 VSCode 强大的扩展功能,我也照猫画虎的绑定了一些常见的操作:
{
将常用的功能快捷键按照 spacemacs 的方式整理以后,基本满足了我日常的开发需求,当然很多细节还是有差距,比如 git 操作等等 (emacs 的 magit 实在是太好用了,名字也很好听,相比之下 VSCode 里主流的 gitlens, 感觉就是个花瓶。。)
- 隐藏不必要的花哨元素
根据我自己的撸码习惯,sidebar,mini-map,tab-bar,active-bar 等等都是十分多余的东西,平时基本都用不到,所以平时我都把他们隐藏起来了,最终大概是这个样子:
![797cdda567b9f1de1e4e5d3a75397788.png](https://i-blog.csdnimg.cn/blog_migrate/51992da472151751339a5a6d306d3159.jpeg)
插件列表
五花八门的插件可能 VSCode 中最亮眼的风景了,基于 VSCode 这个强悍的深度优化的 web 平台和海量开发者,这些插件在实用之余往往还十分养眼,让人对乔布斯口中那个 "没有设计基因" 的巨硬刮目相看。
我目前所使用的所有插件截图如下:
![be51f776bbd9137b386d2ff33a765c0c.png](https://i-blog.csdnimg.cn/blog_migrate/1b3baee9684e01da755f59866487b624.jpeg)
![c0af51e9a1f45f2cbba673a0ec0f04c8.png](https://i-blog.csdnimg.cn/blog_migrate/38ec581c40f9ba3266210d40947a93c2.jpeg)
![00c97320cacd1a197a3750e984dcb5ec.png](https://i-blog.csdnimg.cn/blog_migrate/d5b0576a5d39eee2e93569254517781b.jpeg)
![1f267abcc83c34dfb84813b937699e1f.png](https://i-blog.csdnimg.cn/blog_migrate/fe2306a2c37edd69030e6e65ce510589.jpeg)
![0980b5d2926b9c33796ca39b65f3e35a.png](https://i-blog.csdnimg.cn/blog_migrate/0381593a604c476f7c8d689aee1e1419.jpeg)
这些插件大多或看名字就知道用途,或非常流行各种介绍铺天盖地,我就不过多赘述了,我捡几个相对比较"冷门"的一点的聊聊:
- goto-previous-buffer
说实在的这么实用的功能居然这么少的下载量我是一直没想明白,以至于我是唯一一个留言的用户。。
![87c40b40db97ddcc2f77c995a3475a13.png](https://i-blog.csdnimg.cn/blog_migrate/463f139b7dc5c3ce996f317447dc0a6a.jpeg)
她的功能很实用,可以让你用命令迅速切换到上一个使用的 "editor" (类似于 emacs 里的 buffer), 我把她绑定到了 SPC-Tab。
我不知道其他大多数 VSCode 是怎么执行类似操作的?比如我在同时编写一个模块的 A, B 文件,需要来回切换,我所知只有三种办法:
- 使用 quick-pannel 重新检索之前的文件?
- 使用 opend-editors 命令列出打开的所有 editor ?
- 在 sidebar 里用鼠标点?
第1,3种办法是在太粗暴了,我之前使用的是第二种,但是这个办法列出的所有 editors 并不会把最近打开使用的排在最前面,非常迷,也非常低效。
- custom-css
这个插件可以让 VSCode 加载你自定义的 css/js,从而实现一些你想要的,但是目前又没有提供配置选项的功能。比如觉得 VScode 的启动界面实在太难看啰嗦了,你完全可以像调试普通 web 程序一样自定义她:
![9ce8f59499e78f99b75a5dc8286308d1.png](https://i-blog.csdnimg.cn/blog_migrate/6d577a5c75ddaa403888da6da2314d9a.png)
又比如 VSCode 的多功能搜索框总是在屏幕最上方,在大屏幕上恨不符合我的习惯,你可以用这个插件自定义她的位置:
![26c6fc5e0b8af7d826dd357552a06368.png](https://i-blog.csdnimg.cn/blog_migrate/db47533a6094e6b1db6f71b20b8c5198.jpeg)
- clipboard-manager
可以迅速查看剪切板历史,很实用,很常用。同时建议将她默认的配置关闭:
"clipboard-manager.preview"
![d96e8ca70d12f8fb1be048410b3c3f0a.png](https://i-blog.csdnimg.cn/blog_migrate/a671f4de095d76d443a7ae4eaf1a9751.jpeg)
- clock-in-status-bar
字如其意,我自己 mac 上的 menu bar 并不是一直 fixed 在顶部的,所以有时候想看个时间还得把鼠标移上去或者甚至看一眼手机。。 有了这个就方便多了。
- file-utils
文件操作相关,可以在 quick-panel 里用命令执行相关操作。我个人一般是关闭 sidebar 的,撸码的时候也不太喜欢用鼠标,在我看来这是很打断思路的行为。这个插件很好的满足了我。
![08e1881a0673dc9b913f302f9b7ec2df.png](https://i-blog.csdnimg.cn/blog_migrate/d5eb6d2c3bb33c3af6cebbcb4bd05e3a.jpeg)
- polacode
做幻灯片演示的时候很有用处,可以将当前选中的代码块导出成 png 文件。
![ca594ee878bebb80a0daf0890aef426e.png](https://i-blog.csdnimg.cn/blog_migrate/bc7b232216ed48e05340f5f61f516640.jpeg)
- titlebar-less
让 titlebar 不要那么突兀
![f8faa44151448aac103120aecccb4f9b.png](https://i-blog.csdnimg.cn/blog_migrate/30167f14df57397a4fc5e347aa932cb4.jpeg)
- seedling-icon-theme
不突兀的文件类型图标,不会让你分心,不喧宾夺主。
![7c2b043c819fec5fbfaca010810946ec.png](https://i-blog.csdnimg.cn/blog_migrate/cc0ef0c3dba4b042aad59d76b973b63f.jpeg)
作为糟糕的对比,可以看看其他 icon 是怎么做的:
![a184b86de6276c4ed9b2093532d00bb5.png](https://i-blog.csdnimg.cn/blog_migrate/6c6869d41ed15e7cf48733b00eeb8528.jpeg)
这些图标在暗色背景下往往非常突兀,虽然乍一看很吸引眼球,典型的花哨有余,实用不足。。
最后附上我的配置,平时的配置是用 code-settings-sync 做的,但是设计私有 token,不方便分享,所以我在 github 上又同步了一份 (可能会有滞后),同时,本文也在持续完善中,欢迎各位 VSCoder 一起交流。
mydearxym/vscode-backupgithub.com![42ec192f2fe9b8ede843ff16184bb221.png](https://i-blog.csdnimg.cn/blog_migrate/0aa70245fd7a7985ef55234eec582fa1.jpeg)