在VSCode中開發(fā)Vue/React組件時(shí)，怎么實(shí)時(shí)預(yù)覽組件？本篇文章就給大家分享一個(gè)VSCode 中實(shí)時(shí)預(yù)覽Vue/React組件的插件，希望對(duì)大家有所幫助！

最近年紀(jì)大了喜歡胡思亂想，前段時(shí)間突然想到能不能在VS Code中實(shí)現(xiàn)組件的所見即所得，于是折騰了兩個(gè)月終于做出了能實(shí)現(xiàn)這個(gè)效果的插件，如圖：

支持實(shí)時(shí)預(yù)覽Webpack/Vite開發(fā)時(shí)下的React/Vue組件（Angular應(yīng)該也能，但是我還沒用過，所以沒做支持）。【推薦學(xué)習(xí)：《vscode入門教程》】

使用方式

按參考文檔安裝并使用插件：https://github.com/jaweii/AutoPreview/blob/main/README-zh.md

然后你就可以寫組件時(shí)實(shí)時(shí)預(yù)覽當(dāng)前組件：

還可以把可復(fù)用組件/物料的用例整理在一個(gè)預(yù)覽專用的文件里：

在OUTPUT面板切到AutoPreview來打印調(diào)試：

斷點(diǎn)功能：emmm...? 我也想有...

把預(yù)覽面板拖到底部來預(yù)覽比較寬的組件：

實(shí)現(xiàn)方式

一開始我是只想實(shí)現(xiàn)Webpack+React的組件預(yù)覽的，嘗試了從Webpack配置著手來實(shí)現(xiàn)，但是發(fā)現(xiàn)這條路走不通，依賴關(guān)系太錯(cuò)綜復(fù)雜了，擱置幾天后想到了我以前Vue-Layout項(xiàng)目中組件重新掛載的思路，幾番嘗試后找到實(shí)現(xiàn)的關(guān)鍵，即通過Webpack和Vite都提供的import api來異步加載當(dāng)前窗口文件路徑的組件，然后重新掛載到預(yù)覽窗口，即可實(shí)現(xiàn)預(yù)覽。

所以其本質(zhì)上和你給項(xiàng)目新增個(gè)路由來顯示當(dāng)前頁面中的組件一樣，只是插件自動(dòng)幫你做了。

而因?yàn)槭褂昧薟ebpack和Vite都提供的import api，使用這兩種構(gòu)建工具開發(fā)時(shí)，所有的前端框架理論上都可以實(shí)現(xiàn)在VS Code中渲染項(xiàng)目組件實(shí)現(xiàn)預(yù)覽。

延伸

現(xiàn)在我也只是寫了幾個(gè)Demo來測試插件效果，對(duì)實(shí)際開發(fā)過程中是有增效還是雞肋我也不確定，只是感興趣就做了。

在做的過程中也有一些思考：

如果給可預(yù)覽的組件分級(jí)，那么有

• 基礎(chǔ)組件
• 物料(基礎(chǔ)組件、元素、業(yè)務(wù)邏輯之間的組合，比如登錄框)
• 頁面

? ? 這三種級(jí)別。

基礎(chǔ)組件

通常實(shí)際項(xiàng)目中，基礎(chǔ)組件是來自內(nèi)部或第三方組件庫，高復(fù)用，低耦合，其提供的文檔已經(jīng)能夠預(yù)覽組件效果，針對(duì)這類組件的IDE內(nèi)預(yù)覽似乎意義并不是很大；

物料

物料則是根據(jù)產(chǎn)品需求對(duì)基礎(chǔ)組件、元素、業(yè)務(wù)邏輯進(jìn)行組合的產(chǎn)物，這類物料有的是項(xiàng)目內(nèi)可復(fù)用的，有的是項(xiàng)目內(nèi)沒有復(fù)用但是跨項(xiàng)目存在復(fù)用，有的是業(yè)務(wù)定制完全不可復(fù)用的。

實(shí)際項(xiàng)目的協(xié)同中，物料也是最容易被重復(fù)寫的，且隨著項(xiàng)目越來越大其會(huì)散落在各個(gè)內(nèi)頁，沒有一個(gè)展示頁來讓不同開發(fā)者知道哪些物料是已經(jīng)有了的，就會(huì)造成重復(fù)造物料。對(duì)于這個(gè)問題，阿里飛冰、京東JD WORK這樣的開發(fā)鏈工具是一種解決方案，其提供的物料制作、發(fā)布、使用一條龍服務(wù)可以很大程度上避免重復(fù)造物料，是個(gè)重武器。

我想到了個(gè)輕武器的方案，即針對(duì)物料的IDE內(nèi)預(yù)覽，若合理約定、使用，或許也會(huì)是改善重復(fù)造物料問題的一個(gè)方案。比如約定開發(fā)者對(duì)可復(fù)用的物料導(dǎo)出預(yù)覽，這樣插件可以列出所有可預(yù)覽的組件供其他開發(fā)者瀏覽，其他開發(fā)者開發(fā)新物料前，先在預(yù)覽列表看看有沒有可復(fù)用的，如果有直接參考復(fù)用或CV定制，沒有再自己寫。

頁面

頁面級(jí)則是復(fù)用性極低，不過IDE內(nèi)預(yù)覽H5頁面倒也是種不錯(cuò)的體驗(yàn)，不用在瀏覽器和編輯器間切換，有點(diǎn)微信開發(fā)者工具的感覺。

----

還有一點(diǎn)看法，如果組件的預(yù)覽能夠優(yōu)化開發(fā)體驗(yàn)，我想并不是因?yàn)樗茴A(yù)覽，而是因?yàn)槠鋸?qiáng)制組件作者寫預(yù)覽函數(shù)，預(yù)覽組件，天然需要為組件props傳遞mock數(shù)據(jù)，而mock的數(shù)據(jù)能供自己和其他開發(fā)者參考和CV，這是其提高代碼可維護(hù)性，降低協(xié)同成本的很重要的原因。

且如果預(yù)覽函數(shù)能羅列出組件的多個(gè)用例，對(duì)于其他開發(fā)者來說是多么心曠神怡的事：

原文地址：https://juejin.cn/post/7075507907281977352

作者：朱嘉偉

更多關(guān)于VSCode的相關(guān)知識(shí)，請(qǐng)?jiān)L問：vscode教程??！

以上是VSCode插件分享：一個(gè)實(shí)時(shí)預(yù)覽Vue/React組件的插件的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！