這篇文章跟大家總結推薦一些VSCode中實用前端插件，希望對大家有幫助！
建議一波前端開發必備插件，絕對可以提高你的生產力，剩下的時間來 mo魚，豈不美哉。 【推薦學習：《vscode教學》】
#開發綜合推薦
#別名路徑跳轉
插件名： 別名路徑跳轉
使用說明: 別名路徑跳轉外掛，支援任何項目，
使用場景: 當你在開發頁面時, 想點擊別名路徑匯入的元件時（示範如下）
設定說明
-
下載後只需自訂設定一些自己常用的別名路徑即可
- 右鍵外掛--》擴充設定--》路徑映射在
settinas.json編輯
// 文件名别名跳转
"alias-skip.mappings": {
"~@/": "/src",
"views": "/src/views",
"assets": "/src/assets",
"network": "/src/network",
"common": "/src/common"
},登入後複製
效果顯示
#路徑別名智慧提示
- 外掛程式名稱：
path-alias
- 場景: 在匯入元件的時候，使用別名路徑沒用提示時 (可和別名路徑跳轉同時使用,無衝突)
- 詳細使用教學(賊簡單)
#安裝效果與功能
indent-rainbow
- #外掛名稱:
indent-rainbow
- 功能：彩虹縮排
Bracket Pair Colorizer 2
- 外掛程式名稱:
Bracket Pair Colorizer 2
- 功能：為符合的括號() 或物件{}.. 新增對應的顏色用於區分
Auto Rename Tag
- 外掛程式名稱:
Auto Rename Tag
- #功能：自動重新命名標籤
Code Spell Checker
- 外掛程式名稱：
Code Spell Checker
- 功能：檢查單字拼字是否有誤（支援英文）
Code Runner
- #外掛名稱：
Code Runner
- 功能：一鍵執行各種語言程式碼（常用於測試）
#Debugger for Chrome
- 外掛名稱：
Debugger for Chrome
- 功能：在VSCode端，偵錯程式碼
##Live ServerPP
外掛程式名稱：- Live ServerPP
#功能：在伺服器端開啟你的文件，即時顯示你修改過的程式碼支援websocket 訊息服務，可用於偵錯websocket 用戶端- 支援可程式虛擬文件，可用於模擬服務端API介面
-
Svg Preview
功能：可以顯示你的SVG圖片，還可以編輯
############Tabnine############外掛名稱：###Tabnine######## ##功能：智慧提示程式碼，可以預測你將要寫的程式碼進行提示################
Template String Converter
- 外掛程式名稱：
Template String Converter
- 功能：在字串中輸入$觸發，將字串轉換為模板字串
vscode-pigments
- 外掛名稱：
vscode -pigments
- 功能：即時預覽設定的顏色
#Parameter Hints
功能：提示函數的參數類型及訊息
## Quokka.js- Quokka.js
#使用：安裝外掛後，
ctrl shift p
輸入
Quokka new JavaScr..即可使用
功能：即時顯示列印輸出，更多功能自行探索（常用於測試）
Highlight Matching Tag
-
外掛程式名稱：Highlight Matching Tag
-
基本上都有安裝就不詳細介紹了-
- Bookmarks
功能：常用來讀取原始碼進行標記行，跳轉（程式碼標記快速跳轉）-
- ESLint
# #Prettier - Code formatter-
Project Manager-
- 功能：路徑智慧提示
功能：當引入路徑為圖片時，可以預覽目前圖片
GitLens
- 功能：增強了
git功能，支援在VSCode查看作者、修改時間等等
-
## open in browser
Vue 開發建議
##vue-component 
外掛程式名稱：
vue-component
#功能：
輸入元件名稱自動匯入找到的元件，自動匯入路徑與元件
選取後自動輸入元件名稱（包含必填屬性）、import語句、components屬性-
開發Vue 必備
Vue 3 Snippets
-
外掛名稱：Vue 3 Snippets
-
基本必備：很多- Vue
的程式碼片段，很方便開發-
- React 開發推薦
-
React Style Helper
插件名稱：
React Style Helper
React
中更快速地編寫內聯樣式，並對CSS、LESS、SASS 等樣式檔案提供強大的輔助開發功能
自動補全######跳到樣式和變數定義位置######建立JSX /TSX 的行內樣式######預覽樣式及變數內容###########################行內樣式自動補全，同時支援SASS 變數的跳轉及預覽。 ################
ES7 Reactsnippets
- 外掛程式名稱：
ES7 React/Redux/React-Native/JS snippets
- #功能：很多
React的程式碼片段，很方便開發
vscode-styled-components
- 外掛名稱：
vscode- styled-components
- 功能：在
JS檔案中寫入樣式時，有智慧型提示
主題類別
Dracula Official
- 外掛名稱：
vscode-styled-components
One Dark Pro
vscode-icons- vscode-icons
VSCode
資料夾&檔案圖示
以下插件，可能不常用，大家有興趣試試
#CSS Initial Value- vscode-icons
功能：顯示每個CSS屬性的初始值，當遊標停留在
css
屬性時
#畫板作圖-
外掛名稱： Draw.io Integration-
#功能：在 VSCode
中畫圖，支援多人協作編輯圖表..
Echars 智慧型提示外掛-
外掛程式名稱： echarts-vscode -extension-
使用：安裝外掛程式後，ctrl shift p
輸入 active Echars- 即可開啟智慧提示
功能：提示各種 Echar中Option
的屬性，挺強大的
##翻譯外掛程式
-
A-super-translate
-
使用方法：選取行，Ctrl Shift p 輸入翻譯-
鍵入ctrl `再按下ctrl 1 為翻譯直接取代選取區域
-
##功能：翻譯識別碼中註釋部分，不干擾閱讀。支援不同語言，單行、多行註解、
總結（附全部插件圖片）
- 根據需求，大家安裝對應插件即可（安裝太多插件，VSCode會很卡）
- 當然電腦配置夠強大，當我沒說
更多程式相關知識，請造訪：程式設計影片
！ ！ ###
以上是推薦一些VSCode中實用前端插件（總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
