VSCode 是一款跨平臺的輕量級編輯器，憑藉著優秀的編輯體驗，良好的可擴充套件性、可配置性，已經成為了前端開發使用最多的工具。
VSCode 擁有龐大的外掛市場，開始使用 VSCode 進行前端開發的過程中，眾多的外掛選擇可能會讓我們難以抉擇。結合社群和外掛市場推薦以及自己使用的情況，將開發過程中感覺有明顯收益的外掛分享一波，供大家參考。
Bracket Pair Colorizer
圓括號()、中括號[]和花括號{}是大多數程式語言常用的操作符，javascript 中，函式定義、條件語句、陣列、解構...括號的使用更是無處不在。在我們在編寫或者閱讀程式碼的時候，很難一眼看出兩個匹配的括號。這樣可能會導致兩個負面影響：1、程式碼閱讀效率降低，閱讀時需要確認程式碼是否在同一括號間以確定執行邏輯；2、在缺乏 lint 功能完成較長程式碼片段，可能會漏寫括號會導致程式碼執行錯誤，需要花廢一點時間去重新梳理。
Bracket Pair Colorizer 外掛提供了括號的高亮和匹配標記功能，幫助我們快速定位匹配的括號。
Auto Complete Tag
編寫 HTML 或者 JSX 程式碼過程中，如果我們有這樣的需求：輸入<div> 時自動補全為<div></div>；將<div>修改為<section>，與之匹配的標籤名稱也隨之更改,最終成為<section></section>。雖然 H5 中對未閉合的標籤在有些時候可以顯示，但還是鼓勵所有標籤都能主動閉合。Auto Complete Tag能幫我們在編碼過程快速實現這兩個訴求。
類似的外掛還有：
ESLint
為了更規範的開發前端程式碼，規避程式碼中一些容易造成問題的程式碼，社群沉澱了 lint 的方案，目前最常用的是 ESlint。通常 ESLint 是在通過命令列執行命令，根據資料夾下的 .eslintrc 和 .eslintignore 檔案進行程式碼的校驗，然後再回到編輯器修改校驗出錯的程式碼。這樣程式碼檢測與編碼過程脫離的，從一定程度會影響效率。ESLint 外掛識別專案下的配置，直接在編碼過程做出提示，並且可以配置儲存檔案時自動修復錯誤。
類似的外掛有：
Prettier
ESLint 定義了程式碼層面上的規範，Prettier 則定義了不同編輯器的程式碼格式化規範,確保同一專案經過不同開發者格式化後是一致的。編輯器對程式碼格式化的差異，會為程式碼合帶來不必要的麻煩。Prettier 的詳細介紹可以在 Prettier 官網 瞭解，Prettier 外掛 通過專案下的 .prettier 配置格式化程式碼，我們將這個檔案提交至專案倉庫，支援 prettier 的編輯器開啟專案後都會以同樣的方式格式化程式碼。
類似的外掛有：
REST Client
前後端應用聯調或 Node 介面測試過程中，我們會有請求介面驗證返回結果的需求。通常使用的工具有 Postman 和 CURL。Postman 提供的功能很完備，但需要在開發時額外安裝一個軟體，並且開發過程多幾次軟體的切換也不完美了。CURL 是系統自帶的命令列工具，功能也很強大，但個人感覺控制檯中輸入 curl 命令不太友好。REST Client 為我們提供了在編輯器視窗中快速請求介面的能力，而且我們可以將請求的 API 列表儲存在專案檔案中，方便後面的使用。
GitLens
Gitlens 對 VSCode 的 git 功能做了很多擴充，功能十分強大。最吸引人的是其快速跟蹤程式碼變更的能力，從專案、檔案、程式碼行的維度都能快速定位。程式碼行的 hover 提示容易造成編碼的干擾，個人建議程式碼編寫過程中關閉行變更提示。
Quokka.js
驗證 javascript/Typescript 的一些語法或特性時，我們可能想要一個能快速執行的環境，以前通常會用到瀏覽器自帶的 snippet 功能，在瀏覽器中編碼，程式碼提示效果自然會弱一點，而且對一些新的特性也不能完全支援。 Quokka.js為編輯器提供了快速建立 js/ts playground 功能，我們可以快速在編輯器中編寫可執行的程式碼片段，驗證一些特性。Quokka.js 提供了社群版和 Pro 版本（收費，還不便宜），社群版不能將已儲存的檔案重新加入執行環境，每次需要新建一個檔案來執行。個人感覺平時做一些特性驗證已經夠用了。
類似的外掛有：
Snippet
Snippet 為我們提供了提供的程式碼片快速插入功能。如安裝 react snippet 後，輸入imrc 就能快速生成 import React, {Component} from 'react。在外掛市場，大多數框架和語言都能找到 snippet 實現。因為總是記不全程式碼片的縮寫，個人對程式碼片用的不多。
推薦幾個不錯的程式碼片外掛：
主題
開發過程，有一款能讓自己愉快編碼的主題也會在一定程度上提升程式設計效率和靈感。當然，不同人對於視覺的偏好是不同的，所以在只在最後分享一下我的主題配置。我現在使用的兩個主題外掛：Material Icon Theme 檔案型別新增對應的圖示展示；One Dark Pro 一款看著更柔順的主題。
期待我們在 VSCode 的助力下，更高效更高質的完成工作。
文中如有紕漏，也歡迎大家指正：）