vscode主题 webstorm_从 Emacs 和 Vim 到 VSCode
在很長一段時間里，我都在使用 Emacs 作為我的主力編輯器，所用到的 配置 后來則主要是基于 子龍山人 以及他的 Spacemacs-rocks 系列 ，這些配置文件經(jīng)過碎月累年的魔改和持續(xù)發(fā)酵，伴隨十?dāng)?shù)個各種語言的輕量級前后端項目的洗禮，已經(jīng)像一個隱形的紋身一樣成為了我日常生活的一部分。
對于文本編輯器，我的熱情由來已久，從大學(xué)宿舍到結(jié)婚生子的這些年也接觸過不少：Vim、WebStorm，Emacs，Sublime，RubyMine 等等，她們或純粹，或集成，或性感，或智能，每一位都有著令人難忘的鮮明特色，在漫漫編程路上給了我無數(shù)的美好回憶和默默陪伴。她們所帶給我的影響也不僅僅局限在平時的編碼中，而且潛移默化的給我注入了一個重要的價值觀 -- 不僅要贏，還要贏的漂亮(好吧這其實是巴薩教給我的。。)
盡管選擇眾多，但這其中的佼佼者在我心目中則毫無爭議的屬于"上古時代"的 Emacs 和 vim（Emacs 排在前面僅僅因為我覺得她聽上去更加性感，特此說明），兩個編輯器的背后都是極富傳奇甚至哲學(xué)色彩的程序員，且至今影響深遠(yuǎn) --- 比如 mac 系統(tǒng)上幾乎任何軟件的默認(rèn)快捷鍵很多就繼承自 Emacs (例如 c-f, c-b, c-w, c-k, c-h, c-d, c-p, c-n, c-a, c-e 等等)，再比如幾乎所有的主流編輯器也都有 vim/emacs 的模擬模式可選等等。前幾年出現(xiàn)的 Spacemacs 項目 更是將兩者合二為一，妙之毫巔，就像其在倉庫標(biāo)題里所提到的一樣：
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我之前一直在忙于個人項目，直到一年多以前發(fā)現(xiàn)這個問題，之后曾經(jīng)嘗試手動切換到 develop 分支，結(jié)果各種亂起亂七八糟的報錯連自定義的主題都直接亂掉，嘗試修復(fù)又無從談起，畢竟已經(jīng)落后了幾千個 commit 了。。更重要的是，她讓我的 Emacs 配置變成了一潭死水，在可預(yù)見的很長一段時間內(nèi)都無法和社區(qū)保持同步、keep sharp了，這種感覺實在糟透了。
年后來到新公司坐班，發(fā)現(xiàn)現(xiàn)在搞前端的年輕人都在使用 VSCode ，而且無一例外，失望之余也不免心生好奇，這花里胡哨的東西究竟好在哪里？在又一次嘗試 Spacemacs 下的某個新插件 碰壁后 的某個下午，我覺得是時候 give it a try 了。
VSCode 最初印象
- 很順滑，這是最直觀的印象。
在 Emacs(70年代中期) 和 Vim(80年代末期) 誕生的那個古典年代，鼠標(biāo)并不是個很普及的東西 -- 如果已經(jīng)出現(xiàn)了的話，所以在她們的世界中，一切輸入操作都是要以鍵盤完成的。直到今天，即使 Emacs 和 Vim 在各個平臺上都有了自己的 GUI 的封裝，但是你若用鼠標(biāo)去完成某個操作還是非常蹩腳和低效的(比如拿鼠標(biāo)翻頁？)，和后來的編輯器相比，一點都不“現(xiàn)代”。
VSCode 這方面要好上很多，尤其是你如果在 mac 上使用的話， touchpad 很好用并且就在鍵盤下方，做很多操作就 "方便" 了很多，據(jù)我觀察，我們前端組里多數(shù)人甚至連基本的上下左右移動都是用手指在 touchpad 上完成的，經(jīng)常把我看走神 -- 這種感覺就像是直接拿手指而不是用餐具去吃東西一樣，不是說吃不到嘴里，就是感覺怪怪的。。扯遠(yuǎn)了，這不是重點。。
- 另一大印象就是簡潔、默認(rèn)功能強(qiáng)大。
相比其他的文本編輯器，VSCode 的默認(rèn)配置已經(jīng)很全面了，上手即用，幾乎沒有肉眼可見的學(xué)習(xí)門檻。
基礎(chǔ)配置
我的目標(biāo)基本是把 VSCode 配置成我一直在用的 Spacemacs 的樣子，主要包括快捷鍵和操作習(xí)慣等，力爭能取眾家之長取悅于己。概括來講主要是三點，
- 配置基本快捷鍵：使用 vim 的正常模式作為默認(rèn)配置，在進(jìn)入到 vim 的編輯模式下則使用 Emacs 的快捷鍵。
- 配置功能快捷鍵: 使用 spacemacs 的模式配置功能型快捷鍵
- 隱藏不必要的花哨元素：比如 tabbar, sidebar，mini-map 等等平時基本用不到但又占空間的的東西。
- 配置基本快捷鍵
雖然說了半天 Emacs, 雖然剛開始接觸 vim 的時候敲了半天鍵盤一個字符都沒輸進(jìn)去還重啟了好幾次電腦，但不得不承認(rèn) vim 的在行間移動以及三種模式的理念是極其高效的。不出所料的，VSCode 上有很成熟的 vim 插件：
Vim - Visual Studio Marketplace?marketplace.visualstudio.com但是 vim 有個"缺點"，就是在插入模式下不能很好的使用其他模式的快捷鍵，比如在插入模式下，不能方便的上下左右行移動光標(biāo)，必須要退出到 Normal 模式下才行，雖然可以綁定諸如 "jj", "fd" 等等方便的退出插入模式，我個人還是傾向于在插入模式下使用快捷鍵來做這些動作，具體如下:
- 插入模式下使用 Emacs 的快捷鍵，比如 c-f, c-b, c-p, c-n 分別對應(yīng)向前，向后，向上，和向下移動光標(biāo)，比如 c-a, c-e, c-w, c-b 分別對應(yīng)行首，行末，刪除詞/字，c-g 取消各種操作，彈窗提示等等。
- 在正常的模式下模式使用 vim 的移動快捷鍵。
同時，我還結(jié)合自己的一些習(xí)慣綁定了在 vim normal 模式下增強(qiáng)了一些快捷鍵，比如在原有的 jk 移動基礎(chǔ)上添加了 c-j, c-k 的操作，配合 vim 自帶的 H,M,L 幾乎可以迅速的移動到可視區(qū)的任何位置：
// settings.json{"before": ["ctrl+j"],"after": ["j","j","j"]},{"before": ["ctrl+k"],"after": ["k","k","k"]},按一下頂過去按3下https://www.zhihu.com/video/1138391398238785536作為補(bǔ)充，c-p，c-n 在正常模式下被映射為向上和向下翻頁。
- 配置功能快捷鍵
如前所述，在使用 VSCode 之前我用過很長一段時間的 Spacemacs 配置，她給我留下最深刻的印象就是優(yōu)雅巧妙的區(qū)分了功能快捷鍵，具體操作就是將 vim 的 leader-key 綁定到 "space(空格)"，然后將緊接著的按鍵作為"子菜單入口"進(jìn)入各種功能區(qū)。比如在 Spacemacs 中，按 space-f-s 保存當(dāng)前文件，space-f-r 打開最近使用的文件等等。
實際上，你可以在按 space-f 后稍做停頓查看提示，你會發(fā)現(xiàn)這里全都是和 f(file) 相關(guān)的操作：
類似的，你可以使用 space-g- 執(zhí)行所有和 g(git) 相關(guān)的操作:
如果你一看開始不知道干什么，可以直接按 Space，稍作停留后查看所有功能區(qū)的入口:
f-文件相關(guān)的操作，p-項目相關(guān)的操作，t-toggle相關(guān)功能等等，一旦你熟悉了她符合直覺命名，你幾乎可以想當(dāng)然的摸索出任何功能的快捷鍵，且非常高效和優(yōu)雅，而不是依靠所謂的肌肉記憶和坑長的文檔。。
得益于 VSCode 強(qiáng)大的擴(kuò)展功能，我也照貓畫虎的綁定了一些常見的操作：
{"vim.leader": "<space>", // 首先綁定 leader 鍵到空格// 綁定文件相關(guān)操作{"before": ["<leader>","f","S"],"commands": ["workbench.action.files.saveAll"]},{"before": ["<leader>","f","C"],"commands": ["workbench.files.action.collapseExplorerFolders"]}, // ...// 綁定項目相關(guān)操作{"before": ["<leader>","p","p"],"commands": ["projectManager.listProjects"]},{"before": ["<leader>","p","e"],"commands": ["projectManager.editProjects"]},// ....// ....}將常用的功能快捷鍵按照 spacemacs 的方式整理以后，基本滿足了我日常的開發(fā)需求，當(dāng)然很多細(xì)節(jié)還是有差距，比如 git 操作等等 (emacs 的 magit 實在是太好用了，名字也很好聽，相比之下 VSCode 里主流的 gitlens, 感覺就是個花瓶。。)
- 隱藏不必要的花哨元素
根據(jù)我自己的擼碼習(xí)慣，sidebar，mini-map，tab-bar，active-bar 等等都是十分多余的東西，平時基本都用不到，所以平時我都把他們隱藏起來了，最終大概是這個樣子:
插件列表
五花八門的插件可能 VSCode 中最亮眼的風(fēng)景了，基于 VSCode 這個強(qiáng)悍的深度優(yōu)化的 web 平臺和海量開發(fā)者，這些插件在實用之余往往還十分養(yǎng)眼，讓人對喬布斯口中那個 "沒有設(shè)計基因" 的巨硬刮目相看。
我目前所使用的所有插件截圖如下：
這些插件大多或看名字就知道用途，或非常流行各種介紹鋪天蓋地，我就不過多贅述了，我撿幾個相對比較"冷門"的一點的聊聊：
- goto-previous-buffer
說實在的這么實用的功能居然這么少的下載量我是一直沒想明白，以至于我是唯一一個留言的用戶。。
她的功能很實用，可以讓你用命令迅速切換到上一個使用的 "editor" （類似于 emacs 里的 buffer）, 我把她綁定到了 SPC-Tab。
我不知道其他大多數(shù) VSCode 是怎么執(zhí)行類似操作的？比如我在同時編寫一個模塊的 A, B 文件，需要來回切換，我所知只有三種辦法：
第1，3種辦法是在太粗暴了，我之前使用的是第二種，但是這個辦法列出的所有 editors 并不會把最近打開使用的排在最前面，非常迷，也非常低效。
- custom-css
這個插件可以讓 VSCode 加載你自定義的 css/js，從而實現(xiàn)一些你想要的，但是目前又沒有提供配置選項的功能。比如覺得 VScode 的啟動界面實在太難看啰嗦了，你完全可以像調(diào)試普通 web 程序一樣自定義她:
又比如 VSCode 的多功能搜索框總是在屏幕最上方，在大屏幕上恨不符合我的習(xí)慣，你可以用這個插件自定義她的位置：
- clipboard-manager
可以迅速查看剪切板歷史，很實用，很常用。同時建議將她默認(rèn)的配置關(guān)閉：
"clipboard-manager.preview": false, // 不預(yù)覽條目"clipboard-manager.snippet.enabled": false, // 不去管理 snippets- clock-in-status-bar
字如其意，我自己 mac 上的 menu bar 并不是一直 fixed 在頂部的，所以有時候想看個時間還得把鼠標(biāo)移上去或者甚至看一眼手機(jī)。。 有了這個就方便多了。
- file-utils
文件操作相關(guān)，可以在 quick-panel 里用命令執(zhí)行相關(guān)操作。我個人一般是關(guān)閉 sidebar 的，擼碼的時候也不太喜歡用鼠標(biāo)，在我看來這是很打斷思路的行為。這個插件很好的滿足了我。
- polacode
做幻燈片演示的時候很有用處，可以將當(dāng)前選中的代碼塊導(dǎo)出成 png 文件。
- titlebar-less
讓 titlebar 不要那么突兀
- seedling-icon-theme
不突兀的文件類型圖標(biāo)，不會讓你分心，不喧賓奪主。
作為糟糕的對比，可以看看其他 icon 是怎么做的:
這些圖標(biāo)在暗色背景下往往非常突兀，雖然乍一看很吸引眼球，典型的花哨有余，實用不足。。
最后附上我的配置，平時的配置是用 code-settings-sync 做的，但是設(shè)計私有 token，不方便分享，所以我在 github 上又同步了一份 (可能會有滯后)，同時，本文也在持續(xù)完善中，歡迎各位 VSCoder 一起交流。
mydearxym/vscode-backup?github.com總結(jié)
以上是生活随笔為你收集整理的vscode主题 webstorm_从 Emacs 和 Vim 到 VSCode的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Box2D教程3-刚体绑定外观
- 下一篇： JSP页面去缓存