能讓你開發效率翻倍的 VSCode 插件配置（中）

這篇文章是《能讓你開發效率翻倍的 VSCode 插件配置（上）》的續篇，包括 VSCode 外觀加強、功能加強、編碼效率等方面的 10 個插件，其中有部分插件也是我發佈上篇文章以後在評論裏學到的（這多是寫技術文章的最大好處了，哈哈），試用以後以爲不錯，如今也列出來（同時也感謝願意評論交流的同窗），但願對讀到這篇文章的同窗有所幫助。

外觀加強

若是說美食須要美器的陪襯，優雅美觀的代碼編輯器會大大提高工程師的編碼體驗、工做幸福感。

Guides 縮進參考

與內置的縮進參考線不一樣，Guides 可以讓你經過配置項來修改參考線的顏色、樣式、縮進空白的背景色等，若是你願意折騰，甚至可以配置出相似 Indent Rainbow 那樣風格的參考線。下圖是我使用 Solarized Dark 主題時參考線的配置：

{
    "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
    "guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
    "guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
    "guides.active.color.light": "rgba(200, 100, 100, 0.7)",
    "guides.active.style": "dashed",
    "guides.normal.style": "dashed",
    "guides.stack.style": "dashed",
}
複製代碼

實際效果圖以下：

TODO Highlight

維護時間稍長的代碼倉庫免不了會有各類 TODO、FIXME、HACK 之類的標記，TODO Highlight 可以幫咱們把這些關鍵詞高亮出來，在你翻閱代碼時很是醒目，就像是在大聲提醒你儘快把他解決掉。支持自定義配置須要高亮的關鍵詞，實際使用比較坑的地方是，TODO、FIXME 之類的後面必須加上冒號，不然沒法高亮。截圖以下：

功能加強

Settings Sync

Settings Sync 基於 Gist 實現 VSCode 用戶配置、快捷鍵配置、已安裝插件列表等的備份和恢復功能，配置過程有詳細精確的操做步驟文檔。生成的備份 Gist 默認是私密的，若是你想設置爲共享的，也能夠一鍵切換。可能你會以爲不誇機器不須要備份，以個人實際經從來看，不少悲劇都發生在沒有備份的狀況下，相信聰明的你你知道該怎麼作了，哈哈！

Git Lens

Git Lens 把 VSCode 結合 Git 的使用體驗優化到了極致，能讓咱們在不離開編輯器，不執行任何命令的狀況下知曉光標所在位置代碼的修改時間、做者信息等。官方的介紹也是很是的牛叉：

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Code Outline

Code Outline 能在單獨窗口中列出當源代碼中的各類符號，好比變量名、類名、方法名等，並支持快速跳轉，有點相似於 Vim 裏面的 ctags，翻看老代碼、開源項目代碼時很是有用。

編碼效率

效率的極致就是把能自動化的都自動化了，下面 4 個小工具可以極大的消除常見編輯需求裏面的重複工做：

Document This

Document This 可以一鍵給代碼中的類、函數加上註釋，支持函數聲明、函數表達式、箭頭函數等；

Embrace

Embrace 快速的在選中代碼兩邊添加各類引號、括號，不用來回移動光標，不過仍是沒有 Vim 中的 Surrounding 插件強大；

ECMAScript Quoets Transformer

ECMAScript Quotes Transformer 方便在字符串和變量混搭模式（String Concat）的代碼和字符串模板（Template Literals）模式間來回轉換，省去手動的移動光標、修改引號等操做；

Code Spell Checker

Code Spell Checker 強烈推薦，對大部分非英語母語又不想寫出四不像變量名的程序員來講，正確識記拼寫各類單詞仍是有不小的挑戰，比模棱兩可時須要去查在線詞典不一樣的是，這款插件能實時的識別單詞拼寫是否有誤，並給出提示，很多 bug 都是由於拼寫錯誤致使的。

Code Runner

Code Runner，名副其實的代碼運行插件，支持數十種語言，在不離開代碼編輯器的前提下經過命令面板可直接執行代碼，並查看輸出。下面是盜圖：

其餘的配置：關於行末的空格、文件末尾的空行，之前須要使用插件來實現，如今直接修改 VSCode 內置配置便可實現：

{
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true
}
複製代碼

寫在最後

古有語「工欲善其事必先利其器」，VSCode 在衆多代碼編輯器中屬輕巧而不失靈活的利器，不少器自己就是就很是值得研究，若是有什麼需求須要去尋求擴展，我的建議的作法仍是多讀文檔（RTFM，Read The Fucking Manual），多讀官方文檔，摸清楚清楚你本身手頭工具的能力和侷限，才能避免在法拉利跑車上安裝自行車輪子的笑話。若是實在要新裝輪子，建議仔細閱讀新輪子的說明書。

---

該系列的下篇專門講調試工具，敬請期待。