推薦一些VSCode中實用前端插件（總結）

這篇文章跟大家總結推薦一些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 Preview

功能：可以顯示你的SVG圖片，還可以編輯

############Tabnine############外掛名稱：###Tabnine######## ##功能：智慧提示程式碼，可以預測你將要寫的程式碼進行提示################

Template String Converter

• 外掛程式名稱：Template String Converter
• 功能：在字串中輸入$觸發，將字串轉換為模板字串

vscode-pigments

• 外掛名稱：vscode -pigments
• 功能：即時預覽設定的顏色

#Parameter Hints

• 外掛名稱：
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
• 功能：專案管理插件，當開發多個專案時，可以快速跳轉
  Path Intellisense
• 功能：路徑智慧提示
  • Image preview

功能：當引入路徑為圖片時，可以預覽目前圖片

GitLens

• 功能：增強了git功能，支援在VSCode查看作者、修改時間等等
• ## open in browser
  • 功能：在瀏覽器開啟目前檔案

Vue 開發建議

##vue-component

外掛程式名稱：

vue-component

#功能：

輸入元件名稱自動匯入找到的元件，自動匯入路徑與元件

• 選取後自動輸入元件名稱（包含必填屬性）、import語句、components屬性

• Vetur

• #外掛名稱：Vetur

開發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

• #外掛名稱：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中文網其他相關文章！