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

王仕軍發表於2019-03-04
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",
}
複製程式碼

實際效果圖如下：

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

TODO Highlight

維護時間稍長的程式碼倉庫免不了會有各種 TODO、FIXME、HACK 之類的標記，TODO Highlight 能夠幫我們把這些關鍵詞高亮出來，在你翻閱程式碼時非常醒目，就像是在大聲提醒你儘快把他解決掉。支援自定義配置需要高亮的關鍵詞，實際使用比較坑的地方是，TODO、FIXME 之類的後面必須加上冒號，否則無法高亮。截圖如下：

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

功能增強

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.

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

Code Outline

Code Outline 能在單獨視窗中列出當原始碼中的各種符號，比如變數名、類名、方法名等，並支援快速跳轉，有點類似於 Vim 裡面的 ctags，翻看老程式碼、開源專案程式碼時非常有用。

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

編碼效率

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

Document This

Document This 能夠一鍵給程式碼中的類、函式加上註釋，支援函式宣告、函式表示式、箭頭函式等；

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

Embrace

Embrace 快速的在選中程式碼兩邊新增各種引號、括號，不用來回移動游標，不過還是沒有 Vim 中的 Surrounding 外掛強大；

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

ECMAScript Quoets Transformer

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

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

Code Spell Checker

Code Spell Checker 強烈推薦，對大部分非英語母語又不想寫出四不像變數名的程式設計師來說，正確識記拼寫各種單詞還是有不小的挑戰，比模稜兩可時需要去查線上詞典不同的是，這款外掛能實時的識別單詞拼寫是否有誤，並給出提示，不少 bug 都是因為拼寫錯誤導致的。

Code Runner

Code Runner，名副其實的程式碼執行外掛，支援數十種語言，在不離開程式碼編輯器的前提下通過命令皮膚可直接執行程式碼，並檢視輸出。下面是盜圖：

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

其他的配置：關於行末的空格、檔案末尾的空行，以前需要使用外掛來實現，現在直接修改 VSCode 內建配置即可實現：

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

寫在最後

古有語“工欲善其事必先利其器”，VSCode 在眾多程式碼編輯器中屬輕巧而不失靈活的利器，很多器本身就是就非常值得研究，如果有什麼需求需要去尋求擴充套件，個人建議的做法還是多讀文件（RTFM，Read The Fucking Manual），多讀官方文件，摸清楚清楚你自己手頭工具的能力和侷限，才能避免在法拉利跑車上安裝自行車輪子的笑話。如果實在要新裝輪子，建議仔細閱讀新輪子的說明書。

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

相關文章