2022 VS Code 前端插件推薦
前言
推薦一波前端開發必備插件,絕對可以提高你的生產力,剩下來的時間來 mo 魚,豈不美哉
開發綜合推薦
別名路徑跳轉
插件名:別名路徑跳轉
使用說明: 別名路徑跳轉插件,支持任何項目,
使用場景: 當你在開發頁面時, 想點擊別名路徑導入的組件時(演示如下)
配置說明
-
下載後只需自定義配置一些自己常用的別名路徑即可
// 文件名別名跳轉 "alias-skip.mappings": { "~@/": "/src", "views": "/src/views", "assets": "/src/assets", "network": "/src/network", "common": "/src/common" },
-
右擊插件 --》擴展設置 --》路徑映射在
settinas.json
中編輯
效果展示
路徑別名智能提示
-
插件名:
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
-
功能:在字符串中輸入 $ 觸發,將字符串轉換爲模板字符串
typing a dollar sign then open curly brace within a string converts the quotes to backticks
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
文件夾 & 文件圖標
其他推薦
-
以下插件,可能不常用,大家感興趣可以試試😉
-
微信搜索 readdot,關注後回覆視頻教程獲取 23 種精品資料
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 會很卡)
-
當然電腦配置足夠強大,當我沒說🤔
作者:風不識途
https://segmentfault.com/a/1190000040766151
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/LWTE9Mp_pJN1RGnGTLsolA