搜尋

首頁 >開發工具 >VSCode >推薦一些VSCode中實用前端插件（總結）

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

青灯夜游
青灯夜游轉載
2021-10-11 10:34:373511瀏覽

這篇文章跟大家總結推薦一些VSCode中實用前端插件，希望對大家有幫助！

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

建議一波前端開發必備插件，絕對可以提高你的生產力，剩下的時間來 mo魚，豈不美哉。 【推薦學習：《vscode教學》】

#開發綜合推薦

#別名路徑跳轉

插件名： 別名路徑跳轉

使用說明: 別名路徑跳轉外掛，支援任何項目，

使用場景: 當你在開發頁面時, 想點擊別名路徑匯入的元件時（示範如下）

設定說明

  • 下載後只需自訂設定一些自己常用的別名路徑即可

    • 右鍵外掛--》擴充設定--》路徑映射在settinas.json編輯
    // 文件名别名跳转
  "alias-skip.mappings": {
    "~@/": "/src",
    "views": "/src/views",
    "assets": "/src/assets",
    "network": "/src/network",
    "common": "/src/common"
  },

效果顯示

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

#路徑別名智慧提示

  • 外掛程式名稱：path-alias
  • 場景: 在匯入元件的時候，使用別名路徑沒用提示時 (可和別名路徑跳轉同時使用,無衝突)
  • 詳細使用教學(賊簡單)

#安裝效果與功能

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

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

indent-rainbow

  • #外掛名稱: indent-rainbow
  • 功能：彩虹縮排

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

Bracket Pair Colorizer 2

  • 外掛程式名稱: Bracket Pair Colorizer 2
  • 功能：為符合的括號() 或物件{}.. 新增對應的顏色用於區分

Auto Rename Tag

  • 外掛程式名稱:  Auto Rename Tag
  • #功能：自動重新命名標籤

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

Code Spell Checker

  • 外掛程式名稱：Code Spell Checker
  • 功能：檢查單字拼字是否有誤（支援英文）

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

Code Runner

  • #外掛名稱：Code Runner
  • 功能：一鍵執行各種語言程式碼（常用於測試）

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

#Debugger for Chrome

  • 外掛名稱：Debugger for Chrome
  • 功能：在VSCode端，偵錯程式碼

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

##Live ServerPP

    外掛程式名稱：
  • Live ServerPP
    • #功能：在伺服器端開啟你的文件，即時顯示你修改過的程式碼
    • 支援websocket 訊息服務，可用於偵錯websocket 用戶端
    • 支援可程式虛擬文件，可用於模擬服務端API介面

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

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

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

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

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

Template String Converter

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

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

vscode-pigments

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

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

#Parameter Hints

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

  • 外掛名稱：
    • Parameter Hints

1推薦一些VSCode中實用前端插件（總結）功能：提示函數的參數類型及訊息

    ## Quokka.js
    • 外掛名稱：
  • Quokka.js

#使用：安裝外掛後，1推薦一些VSCode中實用前端插件（總結）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
    • 功能：在瀏覽器開啟目前檔案

推薦一些VSCode中實用前端插件（總結）Vue 開發建議

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

推薦一些VSCode中實用前端插件（總結）外掛程式名稱：

vue-component

#功能：

輸入元件名稱自動匯入找到的元件，自動匯入路徑與元件
  • 選取後自動輸入元件名稱（包含必填屬性）、import語句、components屬性

  • Vetur

  • #外掛名稱：Vetur

開發Vue 必備

Vue 3 Snippets

  • 外掛名稱：Vue 3 Snippets
    • 基本必備：很多
    • Vue
      • 的程式碼片段，很方便開發
    • React 開發推薦
    React Style Helper

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

React Style Helper
  • 功能：在
React

中更快速地編寫內聯樣式，並對CSS、LESS、SASS 等樣式檔案提供強大的輔助開發功能推薦一些VSCode中實用前端插件（總結）

自動補全######跳到樣式和變數定義位置######建立JSX /TSX 的行內樣式######預覽樣式及變數內容###########################行內樣式自動補全，同時支援SASS 變數的跳轉及預覽。 ################

ES7 Reactsnippets

  • 外掛程式名稱：ES7 React/Redux/React-Native/JS snippets
  • #功能：很多React的程式碼片段，很方便開發

vscode-styled-components

  • 外掛名稱：vscode- styled-components
  • 功能：在JS檔案中寫入樣式時，有智慧型提示

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

主題類別

Dracula Official

  • 外掛名稱：vscode-styled-components

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

One Dark Pro

  • #外掛名稱：One Dark Pro

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

    vscode-icons
    • 外掛名稱：
  • vscode-icons
VSCode

資料夾&檔案圖示推薦一些VSCode中實用前端插件（總結）

  • 其他推薦

以下插件，可能不常用，大家有興趣試試

    #CSS Initial Value
    • 外掛名稱：
  • vscode-icons
    • 功能：顯示每個CSS屬性的初始值，當遊標停留在
css

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

    #畫板作圖

  • 外掛名稱：
    • Draw.io Integration

  • #功能：在
    • VSCode
中畫圖，支援多人協作編輯圖表..

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

    Echars 智慧型提示外掛

  • 外掛程式名稱：
    • echarts-vscode -extension

  • 使用：安裝外掛程式後，ctrl shift p

    輸入
    • active Echars
  • 即可開啟智慧提示

    功能：提示各種
    • Echar中Option
的屬性，挺強大的

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

##翻譯外掛程式

  • 外掛名稱：

    A-super-translate

    • 使用方法：選取行，Ctrl Shift p 輸入翻譯
    鍵入ctrl `再按下ctrl 1 為翻譯直接取代選取區域

  • ##功能：翻譯識別碼中註釋部分，不干擾閱讀。支援不同語言，單行、多行註解、

    • 支援使用者字串與變數翻譯,支援駝峰分割

總結（附全部插件圖片）
  • 根據需求，大家安裝對應插件即可（安裝太多插件，VSCode會很卡）
  • 當然電腦配置夠強大，當我沒說

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

更多程式相關知識，請造訪：程式設計影片

！ ！ ###

以上是推薦一些VSCode中實用前端插件（總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

json css chrome echarts less sass String for auto 字符串 接口 JS 对象 git vscode websocket 代码规范
陳述：
本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除
上一篇：vscode能用uni-app嗎下一篇：vscode能用uni-app嗎

相關文章

看更多