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

王仕軍發表於2019-03-04
VSCode

工欲善其事必先利其器，軟體工程師每天打交道最多的可能就是編輯器了。入行幾年來，先後折騰過的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，現在仍高頻使用的就是 VSCode 和 Vim 了。實際上我在 VSCode 裡面安裝了 Vim 外掛，用 Vim 的按鍵模式編碼，因為自從發現雙手不離鍵盤帶來的效率提升之後，就儘可能的不去摸滑鼠。

折騰過 Atom 的我，首次試用 VSCode 就有種 Vim 的輕量感，試用之後果斷棄坑 Atom。Atom 之前，我還使用過 SublimeText，但它在儲存檔案時會不時彈出購買授權的彈窗，實在是令人煩惱。

每每上手新的編輯器，我都會根據自己的開發習慣把它調較到理想狀態，加上熟悉編輯器各種特性，這個過程通常需要幾周的時間。接下來，我就從外觀配置、風格檢查、編碼效率、功能增強等 4 方面來侃侃怎麼配置 VSCode 來提高工作倖福感。

外觀配置

外觀是最先考慮的部分，從配置的角度，無非是配色、圖示、字型等，俗話說蘿蔔白菜各有所愛，我目前的配色、圖示、字型從下圖基本都能看出來，供大家參考：

  • 配色：Solarized Dark，VSCode 已經內建，使用了至少 5 年以上的主題，Vim 下的配置完全相同；
  • 圖示：VSCode Great Icons，給不同型別的檔案配置不同的圖示，非常直觀；
  • 字型：Fira Code，自從發現並開始使用 Fira Code，我就再也沒多看自其它字型一眼，字型如果比較優雅，尤其是對數學運算子的處理，寫程式碼時你真的會感覺在寫詩，哈哈，Fira Code 的安裝過程稍微複雜點，但是效果絕對是值當的；

配色、圖示、字型以及其他外觀配置項具體如下（注意，如果不安裝上述外掛，部分配置項如果直接使用是無效的）：

{
  "editor.cursorStyle": "block",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 24,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  "editor.renderIndentGuides": false,
  "editor.rulers": [120],
  "workbench.colorTheme": "Solarized Dark",
  "workbench.iconTheme": "vscode-great-icons"
}複製程式碼

風格檢查

之前我寫過一篇在 Git 提交環節保障程式碼風格的文章：《使用 husky 和 lint-staged 打造超溜的程式碼檢查工作流》。如果編輯器在編碼時實時給出反饋，對開發者個人而言才是最高效的，在提交時做強制檢查只是從團隊的視角保證編碼風格的規範性和一致性。前端工程師會書寫的程式碼無非是：HTML、CSS、Javascript、Markdown、TypeScript、JSON，對應的 Lint 工具就顯而易見：

  • ESLint：外掛式架構，有多種主流的編碼風格規則集可供選擇，典型的有 Airbnb、Google 等，你甚至可以攢個自己的，按下不表；
  • StyleLint，同樣外掛式架構的樣式檢查工具，不過我在配置其檢查 react-native 中 styled-components 元件樣式時確實費了不小的功夫，可以單獨寫篇文章了；
  • TSLint：TypeScript 目前不是我的主要程式語言，但也早早的準備好了；
  • MarkdownLint：Markdown 如果不合法，可能在某些場合導致解析器異常，因為 Markdown 有好幾套標準，在不同標準間部分語法支援可能是不相容的；

除上面列的 Lint 工具之外，非常值得擁有的還有 EditorConfig 外掛，幾乎所有主流 IDE 都有支援，我們可以通過簡單的配置檔案在不同團隊成員、不同 IDE、不同平臺下約定好檔案的縮排方式、編碼格式，避免出現混亂，下面是我常用的配置：

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = space
indent_size = 2

[{*.yml,*.json}]
indent_style = space
indent_size = 2複製程式碼

有了風格檢查，自然就會產生按配置好的風格規則做檔案格式化的需求，格式化的工具試用了好多，現在還在用的如下：

  • Prettier，實際上已經是程式碼格式化的工具標準，支援格式化幾乎所有的前端程式碼，並且類似於 EditorConfig 支援用檔案來配置格式規則；
  • Vetur，格式化 .vue 檔案，包括裡面的 CSS、JS，至於模板即 HTML 部分，官方維護者說沒有比較好的工具支援，預設是不格式化的；

編碼效率

說到編碼效率，連續六年幾乎每天都編碼的我目前最大的感受是：擊鍵的速度越來越跟不上思維的速度，這種情況下，就需要在編碼時設定適當的快捷鍵，組合使用智慧建議、程式碼片段、自動補全來達到速度的最大化。

VSCode 內建的智慧建議已經非常強大，不過我對預設的配置做了如下修改，以達到類似於在 Vim 中那樣在任何地方都啟用智慧提示（尤其是註釋和字串裡面）：

{
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
}複製程式碼

接下來，重點說說程式碼片段和自動補全兩個效率提升利器。

程式碼片段

英文叫做 Snippets，市面上主流的編輯器也都支援，其基本思想就是把常見的程式碼模式抽出來，通過 2~3 個鍵就能展開 N 行程式碼，程式碼片段的積累一方面是根據個人習慣，另一方面是學習社群裡面積累出來的好的編碼模式，如果覺得不適合你，可以改（找個現有的外掛依葫蘆畫瓢），我常用的程式碼片段外掛如下：

自動補全

自動補全本質上和程式碼片段類似，不過是在特殊場合下以你的鍵入做為啟發式資訊提供最有可能要輸入的建議，我常用的自動補全工具有：

  • Auto Close Tag，適用於 JSX、Vue、HTML，在開啟標籤並且鍵入 </ 的時候，能自動補全要閉合的標籤；
  • Auto Rename Tag，適用於 JSX、Vue、HTML，在修改標籤名時，能在你修改開始（結束）標籤的時候修改對應的結束（開始）標籤，幫你減少 50% 的擊鍵；
  • Path Intellisense，檔案路徑補全，在你用任何方式引入檔案系統中的路徑時提供智慧提示和自動完成；
  • NPM Intellisense，NPM 依賴補全，在你引入任何 node_modules 裡面的依賴包時提供智慧提示和自動完成；
  • IntelliSense for CSS class names，CSS 類名補全，會自動掃描整個專案裡面的 CSS 類名並在你輸入類名時做智慧提示；
  • Emmet，以前叫做 Zen Coding，我發現後，也是愛不釋手，可以把類 CSS 選擇符的字串展開成 HTML 標籤，VSCode 已經內建，官方介紹文件參見，你需要做的就是熟悉他的語法，並勤加練習；

當然，如果你還用 VSCode 編寫其他語言的程式碼，比如 PHP，就去市場上搜尋 “PHP Intellisense” 好了。

功能增強

在效率提升方面除了上面的程式碼片段、自動補全之外，我還安裝了下面幾個外掛，方便快速的瀏覽和理解程式碼，並且在不同專案之間切換。

  • Color Highlight，識別程式碼中的顏色，包括各種顏色格式；
  • Bracket Pair Colorizer，識別程式碼中的各種括號，並且標記上不同的顏色，方便你掃視到匹配的括號，在括號使用非常多的情況下能環節眼部壓力，編輯器快捷鍵固然好用，但是在臨近巢狀多的情況下卻有些力不從心；
  • Project Manager，專案管理，讓我們方便的在命令皮膚中切換專案資料夾，當然，你也可以直接開啟包含多個專案的父級資料夾，但這樣可能會讓 VSCode 變慢；

結語

說了這麼多，相信讀到這裡的你也期望用工具來提高自己的效率。

提高效率有沒有法門？是有的，簡單的事情重複化，重複的事情標準化，標準的事情自動化，發現一個痛點，用外掛解決一個痛點，你的效率自然就上來了。

你都用了哪些外掛呢？歡迎留言交流！

題外話

就用上面列出來的 VSCode 配置我錄製了 3 門前端短視訊教程，你能在這些教程裡看到我 VSCode 的實操效果，如果你有興趣，歡迎點選下面連結：

另外，以後每週會放出新的短視訊教程，如果你想接到推送，歡迎關注《前端週刊》微信公眾號：fullstackacademy，關注即得高清視訊雲盤地址。

相關文章