VS Code：讓你工作效率翻倍的23個外掛和23個編輯技巧
摘要：
總結了一些平時常用且好用的 VS Code 的外掛和編輯技巧分享出來。
文章詳情可查閱我的部落格： lishaoy.net ，歡迎大家訪問。
外觀
主題
這裡我分享兩款主題：
Material Theme
效果如圖：
Material T...
總結了一些平時常用且好用的 VS Code 的外掛和編輯技巧分享出來。
文章詳情可查閱我的部落格： ofollow,noindex" target="_blank">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 字型的效果
關於 FiraCode-Medium 字型更多效果可查閱 github.com/tonsky/Fira… 地址。
程式碼管理
格式化
- Beautify ：格式化的時候，給出格式化文字選項，如下
Beautify
- Prettier ：個人比較喜歡這個，看起來程式碼更清晰，如下
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 安裝了外掛或者修改了配置，回到家或公司又要重新弄一次，這個外掛就能解決問題，同步多臺電腦設定。
只需要把配置上傳到GitHub，在另一個地方下載配置即可，如下
Settings Sync
⌘ - ↑ 或 ⌘ - ↓⌘ - ← 或 ⌘ - →⌥ - ← 或 ⌥ - →⌥ - ⌃ - ← 或 ⌥ - ⌃ - →⇧ - ⌘ - ↑ 或 ⇧ - ⌘ - ↓⇧ - ⌘ - ← 或 ⇧ - ⌘ - →⇧ - ← 、 ⇧ - → 或 ⇧ - ⌥ - ← 、 ⇧ - ⌥ - →⇧ - ⌃ - ⌘ - ← 或 ⇧ - ⌃ - ⌘ - →⌘ - D 或 ⌘ - U⌥ - ↑ 或 ⌥ - ↓⌥ - ⇧ - ↓ 或 ⌘ - ⇧ - K⌘ - J⌘ - [ 或 ⌘ - ]⌘ - ↩ 或 ⌘ - ⇧ - ↩⌘⌘ - ⌥ - ↓ 或 ⌘ - ⌥ - ↑⇧ - ⌥ - I⇧ - ⌘檢視定義⌥ - ⌘ - ] 或 ⌥ - ⌘ - [⌘ - K 、 ⌘ - X⌃ - G@搜尋快捷鍵