系列文章
基礎配置
也許你已經使用 Vscode 一段時間了，安裝了一些流行的外掛，能夠滿足日常開發需求。這樣挺好的，不過如果僅此而已，那麼很可能你就與 Vscode 的諸多功能擦肩而過了。
本文記錄了 Vscode 的一些小技巧，配置，這些對於前端開發工作而言都有著極大的提升。
主題
顏值是提升開發效率的第一要素，而 Vscode 預設主題的配色著實有點讓我欣賞不來。這裡我推薦 Material 下的 Ocean High Contrast。
（tip：還可以在命令皮膚搜尋 accent 來更改主題的高亮色。）
另外，Material Theme Icons 也是非常不錯的檔案圖示主題。
字型
選擇合適的字型能讓程式碼看起來更加賞心悅目，我常年在用的字型是 FiraCode，下載安裝之後在 settings.json 中配置：
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.fontSize": 18
複製程式碼
縮排
可能 tabs vs spaces 之爭困擾著不少人，但不論你是 tabs，還是 spaces，你都可以這樣配置：
"editor.detectIndentation": true,
"editor.insertSpaces": true
"editor.tabSize": 2
複製程式碼
秒開檔案
用過 Vscode 的人都知道，當我們使用 Ctrl + P 開啟一個檔案的時候，檔名是斜體的，這代表當前處於預覽模式，通常這個時候我們再開啟別的檔案，這個預覽的檔案就丟失了，而通過以下配置可以省去預覽這一步，直接開啟檔案：
"workbench.editor.enablePreviewFromQuickOpen": false
複製程式碼
清理側邊欄
側邊欄預設會有一欄開啟的編輯器窗格，個人體驗認為使用場景並不算多，並且會影響美觀，讓側邊欄看起來雜亂無章，通過以下配置就可以隱藏這個窗格（當然也可以直接在側邊欄中通過右鍵選單隱藏）
"explorer.openEditors.visible": 0
複製程式碼
自定義標題欄
Vscode 預設的標題欄只顯示當前檔名和專案名，我們可以參考官網提供的配置選項做出如下配置來進行優化：
"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"
複製程式碼
程式碼縮圖
就是這個東西。
它可以幫助我們快速定位程式碼，但這東西著實有點醜，我們可以通過以下配置來稍微美化一下：
"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 200,
"editor.minimap.showSlider": "always"
複製程式碼
效果還是比較顯著的：
外掛
當然，之所以選擇 Vscode，除了本身強大以外，更重要的是那完整的生態，豐富的外掛——事實上，如果不考慮這些，也許我會用 Atom。
indent-rainbow
這個外掛主要作用是為文字前面的縮排著色，預設著色如下：
javascript console utils
在開發中，要麼在控制檯裡打斷點除錯，要麼是簡單的 console.xxx()。通常前者適用於比較複雜的情況，而邏輯比較簡單的時候，顯然第二種除錯手段效率更高一些。
本外掛通常有兩種操作：
| 快捷鍵 | 操作 |
|---|---|
| Ctrl/Cmd + Shift + L | 輸出固定格式 Log |
| Ctrl/Cmd + Shift + D | 刪除本頁 Log |
（tip：多人協作中，往往會出現很多別人輸出的 log，為了快速定位自己的 log，可以藉助 %c 佔位符插入樣式。當然，如果每一個 log 都需要手動新增樣式，那就捨本逐末了，所以可以稍微改進一下這個外掛，具體方法可以參考VSCode折騰log外掛）
最後輸出日誌效果如下：
Live Server
這是一個非常棒的外掛，無需配置，開箱即用。它可以幫助你啟動一個本地開發伺服器，為靜態和動態頁面提供實時重新載入功能。
vscode-faker
有了這個外掛，就再也不用摳破頭皮去想假資料了。
REST Client
作為 Web 開發人員，我們需要經常使用 REST api，當然 postman 也是不錯的選擇，Vscode 也能輕鬆地滿足我們的需求。