w6553a可以用什么代換(w6554a代換)

前沿拓展：

---

前言

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

開發綜合推薦別名路徑跳轉

插件名：別名路徑跳轉

使用說明: 別名路徑跳轉插件，支持任何項目，

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

配置說明下載后只需自定義配置一些自己常用的別名路徑即可// 文件名別名跳轉"alias-skip.mappings": {"~@/": "/src","views": "/src/views","assets": "/src/assets","network": "/src/network","common": "/src/common"},右擊插件--》擴展設置--》路徑映射在settinas.json中編輯效果展示

test01

路徑別名智能提示插件名：path-alias場景: 在導入組件的時候，使用別名路徑沒用提示時 (可和別名路徑跳轉同時使用, 無沖突)詳細使用教程(賊簡單)安裝效果和功能

img

img

indent-rainbow插件名: indent-rainbow功能：彩虹縮進

image-20211001221922170

Bracket Pair Colorizer 2插件名: Bracket Pair Colorizer 2功能：給匹配的括號() 或者 對象{}.. 添加對應的顏色用于區分

Screenshot

Auto Rename Tag插件名: Auto Rename Tag功能：自動重命名標簽

test02

Code Spell Checker插件名：Code Spell Checker功能：檢查單詞拼寫是否錯誤（支持英語）

image-20211001222515014

Code Runner插件名：Code Runner功能：一鍵執行各種語言代碼（常用于測試）

test03.gif

Debugger for Chrome插件名：Debugger for Chrome功能：在VSCode端，調試代碼

image-20211001223256342

Live ServerPP插件名：Live ServerPP功能：在服務器端打開你的文件，實時顯示你修改的代碼支持websocket 消息服務，可以用于調試websocket 客戶端支持可編程虛擬文件，可用于模擬服務端API接口

Live Server Demo VSCode

Svg Preview插件名：Svg Preview功能：可以顯示你的SVG圖片，還可以編輯

demo

Tabnine插件名：Tabnine功能：智能提示代碼，可以預測你將要寫的代碼進行提示

test04.gif

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功能：提示函數的參數類型及消息

image-20211001225347827

Quokka.js插件名：Quokka.js使用：安裝插件后，ctrl+shift+p輸入Quokka new JavaScr..即可使用功能：實時顯示打印輸出，更多功能自行探索（常用于測試）

test05.gif

Highlight Matching Tag插件名：Highlight Matching Tag功能：當光標停留在標簽時，高亮匹配的標簽

image-20211002094809502

大眾類插件基本都有安裝就不詳細介紹了插件Bookmarks功能：常用于讀源碼進行標記行，跳轉（代碼標記快速跳轉）ESLint功能：代碼規范檢查Prettier - Code formatter功能：代碼美化，自動格式化成規范格式Project Manager功能：項目管理插件，當開發多個項目時，可以快速跳轉Path Intellisense功能：路徑智能提示Image preview功能：當引入路徑為圖片時，可以預覽當前圖片GitLens功能：增強了git功能，支持在VSCode查看作者、修改時間等等open in browser功能：在瀏覽器打開當前文件Vue 開發推薦vue-component插件名：vue-component功能：輸入組件名稱自動導入找到的組件，自動導入路徑和組件選中后自動輸入組件名（包含必填屬性）、import語句、components屬性

img

img

img

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文件中寫樣式時，有智能提示

image-20211002093516003

主題類Dracula Official插件名：vscode-styled-components

image-20211002093806553

One Dark Pro插件名：One Dark Pro

image-20211002093922498

vscode-icons插件名：vscode-iconsVSCode文件夾&文件圖標

image-20211002094123650

其他推薦以下插件，可能不常用，大家感興趣可以試試CSS Initial Value插件名：vscode-icons功能：顯示每個CSS屬性的初始值，當光標停留在css屬性時

image-20211002095626877

畫板作圖插件名：Draw.io Integration功能：在VSCode中畫圖，支持多人協作編輯圖表..

img

Echars 智能提示插件插件名：echarts-vscode-extension使用：安裝插件后，ctrl+shift+p輸入active Echars即可開啟智能提示功能：提示各種Echar中Option 的屬性，挺強大的翻譯插件插件名：A-super-translate使用方法：選中行，Ctrl+Shift+p 輸入 翻譯鍵入 ctrl+`再按下 ctrl+1 為翻譯直接替換選中區域功能：翻譯識別代碼中注釋部分，不干擾閱讀。支持不同語言，單行、多行注釋、支持用戶字符串與變量翻譯,支持駝峰拆分

Introduction

Introduction

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

image-20211002103141474

關于本文

作者：風不識途

https://segmentfault.com/a/1190000040766151

拓展知識：