前端Vscode常用外掛概述
阿新 • • 發佈：2021-01-01
以下是我自己在工作中常用的外掛，寫給剛入門的前端coder。VSCode外掛商店中實用的外掛還是很多的，大家也可以對感興趣的外掛下載下來嘗試一下的！
持續更新
| 外掛名稱 | 概述 | 作用 | 常用預設快捷鍵 |
|---|---|---|---|
| Chinese (Simplified) Language Pack for Visual Studio Code | 漢化中文包 | VSCode漢化包,安裝重啟後就介面就是簡體中文了 | 無 |
| Live Server | 本地動態服務 | 相當於一個本地伺服器.開啟本地HTTP服務,程式碼儲存後,網頁實時更新,比open in browser的外掛好用,後者只能開啟html檔案,程式碼變更後需要手動重新整理才能載入新增的程式碼 | 開啟本地動態服務alt+L+O關閉本地動態服務 alt+L+C |
| Auto Close Tag | 標籤自動補全 | html的書寫中自動給你新增閉合標籤 | 無 |
| Auto Rename Tag | 自動重新命名標籤 | html的書寫中你重新命名標籤的時候，自動給你修改相應的閉合標籤或者開始標籤 | 無 |
| Beautify | 程式碼美化 | 在格式化程式碼的時候，自動美化程式碼（主要就是縮排、空格、換行等），讓程式碼看起來更加美觀，可讀性更強，支援javascript、JSON、CSS、Sass、HTML |
無 VSCode預設格式化程式碼 Shift+Ctrl+F |
| HTML Snippets | HTML程式碼片段 | HTML的程式碼片段，直接輸入標籤名再回車就可以自動給你補全尖括號，極客必備 | 標籤名+空格 |
| JavaScript (ES6) code snippets | JS程式碼片段 | JS程式碼片段,包含ES6,支援的語言有JavaScript、TypeScript、JavaScript React、TypeScript React、Html、Vue |
常見快捷鍵詳見外掛說明 |
| Vetur | Vue工具 | 對於在VSCode中開發Vue必備外掛！語法高亮、vue程式碼片段、錯誤檢測、vue程式碼美化等強大的功能，具體介紹詳見知乎大神的回答 | 詳見大神回答 |
| Vue 3 Snippets | Vue3.0程式碼片段 | Vue3.0的程式碼片段，對使用Vue3.0開發專案的Coder比較友好，它基於2.0和3.0的API增加了一些程式碼片段 | 常見快捷鍵詳見外掛說明 |
| ESLint | 前端程式碼檢查工具 | 現在最火的前端程式碼檢查工具，幫助你避免一些低階的bug，給你刪除多餘的程式碼，還可以幫助在團隊統一程式碼風格，使得程式碼可以更加優雅的合併。可是，對於剛入門前端的Coder不太推薦使用。因為如果是剛入門的Coder，程式碼寫的七零八亂，你就會發現它給你的程式碼標註的整片鮮紅，滿是錯誤。推薦再掌握了一定的程式碼規範基礎後，再使用這個外掛。 | 無 |