在很長一段時間里，我都在使用 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/spacemacs?github.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 Marketplace?marketplace.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 平臺和海量開發者，這些插件在實用之余往往還十分養眼，讓人對喬布斯口中那個 "沒有設計基因" 的巨硬刮目相看。

我目前所使用的所有插件截圖如下：

這些插件大多或看名字就知道用途，或非常流行各種介紹鋪天蓋地，我就不過多贅述了，我撿幾個相對比較"冷門"的一點的聊聊：

• goto-previous-buffer

說實在的這么實用的功能居然這么少的下載量我是一直沒想明白，以至于我是唯一一個留言的用戶。。

她的功能很實用，可以讓你用命令迅速切換到上一個使用的 "editor" （類似于 emacs 里的 buffer）, 我把她綁定到了 SPC-Tab。

我不知道其他大多數 VSCode 是怎么執行類似操作的？比如我在同時編寫一個模塊的 A, B 文件，需要來回切換，我所知只有三種辦法：

使用 quick-pannel 重新檢索之前的文件？

使用 opend-editors 命令列出打開的所有 editor ?

在 sidebar 里用鼠標點？

第1，3種辦法是在太粗暴了，我之前使用的是第二種，但是這個辦法列出的所有 editors 并不會把最近打開使用的排在最前面，非常迷，也非常低效。

• custom-css

這個插件可以讓 VSCode 加載你自定義的 css/js，從而實現一些你想要的，但是目前又沒有提供配置選項的功能。比如覺得 VScode 的啟動界面實在太難看啰嗦了，你完全可以像調試普通 web 程序一樣自定義她:

又比如 VSCode 的多功能搜索框總是在屏幕最上方，在大屏幕上恨不符合我的習慣，你可以用這個插件自定義她的位置：

• clipboard-manager

可以迅速查看剪切板歷史，很實用，很常用。同時建議將她默認的配置關閉：

"clipboard-manager.preview": false, // 不預覽條目"clipboard-manager.snippet.enabled": false, // 不去管理 snippets

• clock-in-status-bar

字如其意，我自己 mac 上的 menu bar 并不是一直 fixed 在頂部的，所以有時候想看個時間還得把鼠標移上去或者甚至看一眼手機。。 有了這個就方便多了。

• file-utils

文件操作相關，可以在 quick-panel 里用命令執行相關操作。我個人一般是關閉 sidebar 的，擼碼的時候也不太喜歡用鼠標，在我看來這是很打斷思路的行為。這個插件很好的滿足了我。

• polacode

做幻燈片演示的時候很有用處，可以將當前選中的代碼塊導出成 png 文件。

• titlebar-less

讓 titlebar 不要那么突兀

• seedling-icon-theme

不突兀的文件類型圖標，不會讓你分心，不喧賓奪主。

作為糟糕的對比，可以看看其他 icon 是怎么做的:

這些圖標在暗色背景下往往非常突兀，雖然乍一看很吸引眼球，典型的花哨有余，實用不足。。

---

最后附上我的配置，平時的配置是用 code-settings-sync 做的，但是設計私有 token，不方便分享，所以我在 github 上又同步了一份 (可能會有滯后)，同時，本文也在持續完善中，歡迎各位 VSCoder 一起交流。

mydearxym/vscode-backup?github.com

總結

以上是生活随笔為你收集整理的vscode主题 webstorm_从 Emacs 和 Vim 到 VSCode的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。