2022，VSCode 前端外掛推薦

語言: CN / TW / HK
時間 2022-06-22 08:43:22

前言

推薦一波前端開發必備外掛，絕對可以提高你的生產力，剩下來的時間來 mo魚，豈不美哉

開發綜合推薦

別名路徑跳轉

外掛名：別名路徑跳轉

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

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

配置說明

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

    // 檔名別名跳轉
  "alias-skip.mappings": {
    "[email protected]/": "/src",
    "views": "/src/views",
    "assets": "/src/assets",
    "network": "/src/network",
    "common": "/src/common"
  },
    • 右擊外掛--》擴充套件設定--》路徑對映在 settinas.json 中編輯

效果展示

路徑別名智慧提示

  • 外掛名： path-alias

  • 場景: 在匯入元件的時候，使用 別名路徑沒用提示時 :point_down: (可和別名路徑跳轉同時使用, 無衝突)

安裝效果和功能

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 資料夾&檔案圖示

其他推薦

  • 以下外掛，可能不常用，大家感興趣可以試試:wink:

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會很卡）

  • 當然電腦配置足夠強大，當我沒說

作者： 風不識途

http://segmentfault.com/a/1190000040766151

- EOF -

覺得本文對你有幫助？請分享給更多人

關注「大前端技術之路」加星標，提升前端技能

點贊和在看就是最大的支援 :heart:

「」
「」