在VSCode中開(kāi)發(fā)Vue/React元件時(shí)，怎麼即時(shí)預(yù)覽元件？本篇文章就跟大家分享一個(gè)VSCode 中即時(shí)預(yù)??覽Vue/React元件的插件，希望對(duì)大家有幫助！

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

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

使用方式

依參考文件安裝並使用外掛程式： https://github.com/jaweii/AutoPreview/blob/main/README-zh.md

然後你就可以寫(xiě)元件時(shí)即時(shí)預(yù)覽目前元件：

#還可以把可重複使用元件/物料的用例整理在一個(gè)預(yù)覽專(zhuān)用的檔案裡：

在OUTPUT面板切到AutoPreview來(lái)列印偵錯(cuò)：

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

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

實(shí)作方式

一開(kāi)始我只想實(shí)作Webpack React的元件預(yù)覽的，嘗試了從Webpack配置著手來(lái)實(shí)現(xiàn)，但是發(fā)現(xiàn)這條路走不通，依賴(lài)關(guān)係太錯(cuò)綜複雜了，擱置幾天后想到了我以前Vue-Layout項(xiàng)目中組件重新掛載的思路，幾番嘗試後找到實(shí)現(xiàn)的關(guān)鍵，即透過(guò)Webpack和Vite都提供的import api來(lái)非同步載入目前視窗檔案路徑的元件，然後重新掛載到預(yù)覽窗口，即可實(shí)現(xiàn)預(yù)覽。

所以其本質(zhì)上和你為專(zhuān)案新增個(gè)路由來(lái)顯示當(dāng)前頁(yè)面中的元件一樣，只是插件自動(dòng)幫你做了。

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

延伸

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

在做的過(guò)程中也有一些思考：

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

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

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

基礎(chǔ)元件

通常在實(shí)際專(zhuān)案中，基礎(chǔ)元件是來(lái)自?xún)?nèi)部或第三方元件庫(kù)，高重複使用，低耦合，其提供的文件已經(jīng)能夠預(yù)覽元件效果，針對(duì)這類(lèi)元件的IDE內(nèi)預(yù)覽似乎意義並不是很大；

物料

物料則是根據(jù)產(chǎn)品需求對(duì)基礎(chǔ)元件、元素、業(yè)務(wù)邏輯進(jìn)行組合的產(chǎn)物，這類(lèi)物料有的是專(zhuān)案內(nèi)可重複使用的，有的是專(zhuān)案內(nèi)沒(méi)有重複使用但是跨專(zhuān)案存在重複使用，有的是業(yè)務(wù)定製完全不可復(fù)用的。

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

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

頁(yè)面

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

----

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

且如果預(yù)覽函數(shù)能羅列出元件的多個(gè)用例，對(duì)於其他開(kāi)發(fā)者來(lái)說(shuō)是多麼心曠神怡的事：

原文網(wǎng)址：https://juejin.cn/post/7075507907281977352

作者：朱嘉偉

更多關(guān)於VSCode的相關(guān)知識(shí)，請(qǐng)?jiān)煸L(fǎng)：vscode教學(xué)！ ！

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