[ 從零開始配置一個 Windows 前端開發環境 ] - 二：vscode

系列文章

• [ 從零開始配置一個 Windows 前端開發環境 ] - 一：WT + WSL

基礎配置

也許你已經使用 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 也能輕鬆地知足咱們的需求。