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

工欲善其事必先利其器，軟件工程師天天打交道最多的可能就是編輯器了。入行幾年來，前後折騰過的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode，如今仍高頻使用的就是 VSCode 和 Vim 了。實際上我在 VSCode 裏面安裝了 Vim 插件，用 Vim 的按鍵模式編碼，由於自從發現雙手不離鍵盤帶來的效率提高以後，就儘量的不去摸鼠標。css

折騰過 Atom 的我，首次試用 VSCode 就有種 Vim 的輕量感，試用以後果斷棄坑 Atom。Atom 以前，我還使用過 SublimeText，但它在保存文件時會不時彈出購買受權的彈窗，實在是使人煩惱。html

往往上手新的編輯器，我都會根據本身的開發習慣把它調較到理想狀態，加上熟悉編輯器各類特性，這個過程一般須要幾周的時間。接下來，我就從外觀配置、風格檢查、編碼效率、功能加強等 4 方面來侃侃怎麼配置 VSCode 來提升工做幸福感。前端

外觀配置

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

配色：Solarized Dark，VSCode 已經內置，使用了至少 5 年以上的主題，Vim 下的配置徹底相同；
圖標：VSCode Great Icons，給不一樣類型的文件配置不一樣的圖標，很是直觀；
字體：Fira Code，自從發現並開始使用 Fira Code，我就再也沒多看自其它字體一眼，字體若是比較優雅，尤爲是對數學運算符的處理，寫代碼時你真的會感受在寫詩，哈哈，Fira Code 的安裝過程稍微複雜點，可是效果絕對是值當的；

配色、圖標、字體以及其餘外觀配置項具體以下（注意，若是不安裝上述插件，部分配置項若是直接使用是無效的）：node

{
  "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 工具就顯而易見：react

ESLint：插件式架構，有多種主流的編碼風格規則集可供選擇，典型的有 Airbnb、Google 等，你甚至能夠攢個本身的，按下不表；
StyleLint，一樣插件式架構的樣式檢查工具，不過我在配置其檢查 react-native 中 styled-components 組件樣式時確實費了不小的功夫，能夠單獨寫篇文章了；
TSLint：TypeScript 目前不是個人主要編程語言，但也早早的準備好了；
MarkdownLint：Markdown 若是不合法，可能在某些場合致使解析器異常，由於 Markdown 有好幾套標準，在不一樣標準間部分語法支持多是不兼容的；

除上面列的 Lint 工具以外，很是值得擁有的還有 EditorConfig 插件，幾乎全部主流 IDE 都有支持，咱們能夠經過簡單的配置文件在不一樣團隊成員、不一樣 IDE、不一樣平臺下約定好文件的縮進方式、編碼格式，避免出現混亂，下面是我經常使用的配置：git

[*]
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複製代碼

有了風格檢查，天然就會產生按配置好的風格規則作文件格式化的需求，格式化的工具試用了好多，如今還在用的以下：github

Prettier，實際上已是代碼格式化的工具標準，支持格式化幾乎全部的前端代碼，而且相似於 EditorConfig 支持用文件來配置格式規則；
Vetur，格式化 .vue 文件，包括裏面的 CSS、JS，至於模板即 HTML 部分，官方維護者說沒有比較好的工具支持，默認是不格式化的；

編碼效率

說到編碼效率，連續六年幾乎天天都編碼的我目前最大的感覺是：擊鍵的速度愈來愈跟不上思惟的速度，這種狀況下，就須要在編碼時設置適當的快捷鍵，組合使用智能建議、代碼片斷、自動補全來達到速度的最大化。npm

VSCode 內置的智能建議已經很是強大，不過我對默認的配置作了以下修改，以達到相似於在 Vim 中那樣在任何地方都啓用智能提示（尤爲是註釋和字符串裏面）：編程

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

接下來，重點說說代碼片斷和自動補全兩個效率提高利器。

代碼片斷

英文叫作 Snippets，市面上主流的編輯器也都支持，其基本思想就是把常見的代碼模式抽出來，經過 2~3 個鍵就能展開 N 行代碼，代碼片斷的積累一方面是根據我的習慣，另外一方面是學習社區裏面積累出來的好的編碼模式，若是以爲不適合你，能夠改（找個現有的插件依葫蘆畫瓢），我經常使用的代碼片斷插件以下：

HTML Snippets，各類 HTML 標籤片斷，若是你 Emmet 玩的熟，徹底能夠忽略這個；
Javascript (ES6) Code Snippets，經常使用的類聲明、ES 模塊聲明、CMD 模塊導入等，支持的縮寫不下 20 種；
Javascript Patterns Snippets，常見的編碼模式，好比 IIFE；

自動補全

自動補全本質上和代碼片斷相似，不過是在特殊場合下以你的鍵入作爲啓發式信息提供最有可能要輸入的建議，我經常使用的自動補全工具備：

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 的實操效果，若是你有興趣，歡迎點擊下面連接：

與時俱進：React 16 新特性嚐鮮教程，6 小節，18 分鐘，用實例演示如何運用新特性提升代碼穩定性，優化設計；
組件化必殺技：styled-components 簡明教程，8 小節，23 分鐘，讓你快速入門現象級的 CSS-IN-JS 解決方案；
玩轉異步JS：async/await 簡明教程，8 小節，20 分鐘，經過實戰讓你把 async/await 用的飛起；

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