*以下是我自己在工作中常用的外掛，寫給剛入門的前端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程式碼美化等強大的功能，具體介紹詳見[知乎大神的回答](https://zhuanlan.zhihu.com/p/27561649) | 詳見大神回答 | | Vue 3 Snippets | Vue3.0程式碼片段 | Vue3.0的程式碼片段，對使用Vue3.0開發專案的Coder比較友好，它基於2.0和3.0的API增加了一些程式碼片段 | 常見快捷鍵詳見外掛說明 | | ESLint | 前端程式碼檢查工具 | 現在最火的前端程式碼檢查工具，幫助你避免一些低階的bug，給你刪除多餘的程式碼，還可以幫助在團隊統一程式碼風格，使得程式碼可以更加優雅的合併。**可是，對於剛入門前端的Coder不太推薦使用。**因為如果是剛入門的Coder，程式碼寫的七零八亂，你就會發現它給你的程式碼標註的整片鮮紅，滿是錯誤。推薦再掌握了一定的程式碼規範基礎後，再使用這個外掛。 | 無