2022,VSCode 前端外掛推薦
前言
推薦一波前端開發必備外掛,絕對可以提高你的生產力,剩下來的時間來 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: