前端Vscode常用插件概述
以下是我自己在工作中常用的插件，寫給剛入門的前端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，代碼寫的七零八亂，你就會發現它給你的代碼標註的整片鮮紅，滿是錯誤。推薦再掌握了一定的代碼規範基礎後，再使用這個插件。 | 無 |
