VS Code：讓你工作效率翻倍的23個外掛和23個編輯技巧

子木_lsy發表於2018-10-16

總結了一些平時常用且好用的 VS Code 的外掛和編輯技巧分享出來。

文章詳情可查閱我的部落格：lishaoy.net ，歡迎大家訪問。

外觀

主題

這裡我分享兩款主題：

Material Theme

效果如圖：

An Old Hope Theme

效果如圖：

圖示

Material Icon Theme 當然，這兩款主題的檔案管理器（左側）的 icon 小圖示使用的是 Material Icon Theme

字型及其他

其他和外觀相關的設定如下：

{
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": false,
    "workbench.activityBar.visible": false,
    "workbench.iconTheme": "eq-material-theme-icons-darker",
    "workbench.colorCustomizations": {},
    "materialTheme.cache.workbench.settings": {
        "themeColours": "Darker",
        "accentPrevious": "Acid Lime"
    },
    "workbench.colorTheme": "Material Theme Darker",
    "material-icon-theme.angular.iconsEnabled": true,
    "material-icon-theme.folders.icons": "specific",
    "editor.lineHeight": 24,
    "editor.fontLigatures": true,
    "editor.fontFamily": "FiraCode-Medium"
}
複製程式碼

特別注意的是 "editor.lineHeight": 24, 和 "editor.fontFamily": "FiraCode-Medium" 。

"editor.lineHeight": 24, ：設定程式碼的行間距，這裡比預設的稍大些，就這一點小小的改變，讓程式碼看起來清爽整潔。

"editor.fontFamily": "FiraCode-Medium" ：設定字型，這種字型會讓程式碼看起來更形象生動，如下

紅色豎線左邊是使用了 FiraCode-Medium 字型的效果，紅色豎線右邊是沒有使用 FiraCode-Medium 字型的效果

關於 FiraCode-Medium 字型更多效果可查閱 github.com/tonsky/Fira… 地址。

程式碼管理

格式化

Beautify ：格式化的時候，給出格式化文字選項，如下

Prettier ：個人比較喜歡這個，看起來程式碼更清晰，如下

當然，大家可以自定義快捷鍵，也可以按 ⌘ - ⇧ - P 來搜尋相關命令

程式碼檢查

ESLint ：檢查 js 語法規範，你可以使用不同的規範，如 airbnb 、standard 、google。
TSLint ：檢查 typescript 語法規範。
Stylelint ：檢查 CSS/SCSS/Less 語法規範。
Markdownlint ：檢查 markdown 語法規範。

自動補全

以下外掛點選連結可以檢視gif動圖，詳細瞭解具體功能。

Emmet ：大家應該很熟悉這個外掛了（很好用），VS Code 已經內建了，很到位。
Auto Close Tag ：自動閉合 html 等標籤（</...>）。
Auto Rename Tag ：修改 html 標籤時，自動修改閉合標籤。
Path Intellisense ：自動提示補全路徑。

程式碼片段

snippets ：搭建可以自己安裝各種程式碼片段（vue、react、angular等），這裡就不列舉。

功能擴充套件

以下的功能擴充套件外掛大部分都有gif動圖，可點選連結瞭解詳細功能

Bracket Pair Colorizer ：讓程式碼的各種括號呈現不同的顏色。
Code Runner ：可以在編輯器裡直接執行程式碼，檢視結果。
Color Picker ：可以直接在編輯器裡開啟色板，選擇各種模式的顏色。
Document This ：可以給函式、類等自動的加上詳細的註釋。
Git History ：方便的檢視git版本管理的詳細資訊。
Live Server ：可以一鍵在本地啟動伺服器。
Settings Sync ：重點介紹下這個外掛，如果你有兩臺電腦（比如，家裡和公司）都使用 VS Code ，可是在公司或家裡對 VS Code 安裝了外掛或者修改了配置，回到家或公司又要重新弄一次，這個外掛就能解決問題，同步多臺電腦設定。