本篇文章給大家總結(jié)推薦一些VSCode中實(shí)用前端插件，希望對(duì)大家有所幫助！

推薦一波前端開發(fā)必備插件，絕對(duì)可以提高你的生產(chǎn)力，剩下來的時(shí)間來 mo魚，豈不美哉?！就扑]學(xué)習(xí)：《vscode教程》】

開發(fā)綜合推薦

別名路徑跳轉(zhuǎn)

插件名： 別名路徑跳轉(zhuǎn)

使用說明: 別名路徑跳轉(zhuǎn)插件，支持任何項(xiàng)目，

使用場景: 當(dāng)你在開發(fā)頁面時(shí), 想點(diǎn)擊別名路徑導(dǎo)入的組件時(shí)（演示如下）

配置說明

• 下載后只需自定義配置一些自己常用的別名路徑即可

  • 右擊插件–》擴(kuò)展設(shè)置–》路徑映射在settinas.json中編輯

  // 文件名別名跳轉(zhuǎn)   "alias-skip.mappings": {     "~@/": "/src",     "views": "/src/views",     "assets": "/src/assets",     "network": "/src/network",     "common": "/src/common"   },

效果展示

路徑別名智能提示

• 插件名：path-alias
• 場景: 在導(dǎo)入組件的時(shí)候，使用別名路徑?jīng)]用提示時(shí) (可和別名路徑跳轉(zhuǎn)同時(shí)使用, 無沖突)
• 詳細(xì)使用教程(賊簡單)

安裝效果和功能

indent-rainbow

• 插件名: indent-rainbow
• 功能：彩虹縮進(jìn)

Bracket Pair Colorizer 2

• 插件名: Bracket Pair Colorizer 2
• 功能：給匹配的括號(hào)() 或者 對(duì)象{}.. 添加對(duì)應(yīng)的顏色用于區(qū)分

Auto Rename Tag

• 插件名: Auto Rename Tag
• 功能：自動(dòng)重命名標(biāo)簽

Code Spell Checker

• 插件名：Code Spell Checker
• 功能：檢查單詞拼寫是否錯(cuò)誤（支持英語）

Code Runner

• 插件名：Code Runner
• 功能：一鍵執(zhí)行各種語言代碼（常用于測試）

Debugger for Chrome

• 插件名：Debugger for Chrome
• 功能：在VSCode端，調(diào)試代碼

Live ServerPP

• 插件名：Live ServerPP
• 功能：在服務(wù)器端打開你的文件，實(shí)時(shí)顯示你修改的代碼
  • 支持websocket 消息服務(wù)，可以用于調(diào)試websocket 客戶端
  • 支持可編程虛擬文件，可用于模擬服務(wù)端API接口

Svg Preview

• 插件名：Svg Preview
• 功能：可以顯示你的SVG圖片，還可以編輯

Tabnine

• 插件名：Tabnine
• 功能：智能提示代碼，可以預(yù)測你將要寫的代碼進(jìn)行提示

Template String Converter

• 插件名：Template String Converter
• 功能：在字符串中輸入$觸發(fā)，將字符串轉(zhuǎn)換為模板字符串

vscode-pigments

• 插件名：vscode-pigments
• 功能：實(shí)時(shí)預(yù)覽設(shè)置的顏色

Parameter Hints

• 插件名：Parameter Hints
• 功能：提示函數(shù)的參數(shù)類型及消息

Quokka.js

• 插件名：Quokka.js
• 使用：安裝插件后，ctrl+shift+p輸入Quokka new JavaScr..即可使用
• 功能：實(shí)時(shí)顯示打印輸出，