作者 |?零一

來源 |?前端印象

大家好，看到一個好東西，忍不住來分享一下。

我們在寫需求時都會封裝一些組件，然后會為該組件定義一些 props ，使其跟業務分離，變得更通用。寫完組件后需要驗證一下組件的效果，也就需要簡單 mock 一下數據傳進去，然后跑一下項目看一下

//?components/card/index.tsx??Card?組件? //?咱先來寫個組件 export?default?function?Card?(props)?{const?{?name?}?=?propsreturn?(<div>{name}</div>) }//?index.tsx??項目根目錄 //?組件寫好了，找個地方引入一下，傳點數據進去，免得項目崩了 import?Card?form?'card' export?default?function?App?()?{return?(<Card?name="零一"?/>) }$?#?跑一下項目，看看剛才寫的組件的效果 $?yarn?dev

這套流程，你是不是很熟悉？大家可能都是這么干的，看完效果后還要回過頭去把剛剛不要的測試代碼都刪掉

然而，我找到了一個非常好用的 Vscode 插件 大大簡化了這個流程！！！！

它就是 Preview.js ，一個用于項目中組件實時預覽的插件

它有什么優點？

支持 React（v16+）、Vue2、Vue3、SolidJS，并即將支持 Preact 和 Svelte

無需啟動項目，直接靜態預覽組件效果

自動識別組件

自動生成 props 的 mock 數據

實時刷新，無需瘋狂點保存觸發

可以針對同一個組件生成多個預覽，并可快速切換

支持調整頁面比例，以及切換不同分辨率的設備

暗黑模式切換

直接搜索項目中的其它組件，快速切換

香不香？我反正已經上手使用過了，是真的香！之前我自己也做過組件庫的項目，寫完一個組件，就需要寫一個 example 去看看效果，要是用了這個插件，項目也不用跑，實時預覽，該有多爽啊（正在開發組件庫的同學看過來，福利啊）

再講一下這個插件的缺點

插件是剛出的，可能會有一些bug，這是難免的

上述優點中，6、7、8都是需要付費的，不過目前可以白嫖，等會講

待發現...

但我目前用下來是沒啥問題的

接下來帶大家體驗一下

安裝

直接在 VsCode 的插件市場搜索：Preview.js，安裝即可

安裝插件

然后最好重啟一下 VsCode

emmmm，大多數同學應該會收到這樣一條報錯信息：

npm 版本過低

因為重啟后的初始化階段，Preview.js 插件會安裝一些依賴包，并且它們最低支持的 npm 版本是 7+，估摸著大部分同學的 npm 包都是小于 7 的，所以還是建議大家想要使用時切換一下 node 版本，比如用 nvm use 17.5.0，此時的 npm 版本就到了 8+ 了，滿足了需求，此時還需要重啟一次

稍微耐心等待幾秒鐘，等它的依賴包都裝好就ok了

preview.js 依賴包安裝成功

基本使用

為了方便起見，我就拿 React 的代碼來做示例了，但剛才提到那些庫也都是支持的哈，大家可以自行嘗試

咱們隨便找到項目中的一個組件打開

可以看到，插件自動識別到了我的 Card 組件，并在上方懸浮了一個 Open Card in Preview.js 的灰色按鈕，點擊以后右邊就會出來一個預覽窗口了（此時咱們都還沒啟動項目）

還能看到，右下角也幫我們生成了該組件需要的 props 的 mock 數據，不過這個前提條件是你項目是?TS 的，并且給 props 限定了類型才行，否則是不行的（我試過了）

一切（新增組件、修改文本、修改樣式...）的修改都是實時的（除了修改 props 類型），我們來看一下

類型修改不能實時也算是一個小缺點，希望后續可以改進一下。如果咱們改了類型，目前只需重啟預覽窗口就可以了，點底部的刷新是沒用的

Pro 級別的功能

接下來是高級用戶可以使用的功能，我看到他們官網是有申請 30 天免費體驗資格的，為了本文的效果，我先申請了

申請網址：https://previewjs.com/checkout

填一下自己的郵箱，就申請成功了

然后它會把一個兌換碼發到你的郵箱里

拿著這個碼去 VsCode 的 Preview.js 預覽窗口里填寫即可

然后就成功了，頁面現在多了一堆功能

來統一體驗一下吧

體驗pro付費功能

總結

總體來說這個插件已經很 nice 了，即使不用付費版本的功能，也可以滿足基本的需求，而且這個功能在寫業務時非常有用，大大提高工作效率，真的真的強烈推薦！！！！

Preview.js: https://previewjs.com/

往期推薦

如果讓你來設計網絡

70% 開發者對云原生一知半解，“云深”如何知處？

一把王者的時間，我就學會了Nginx

如何在 Kubernetes Pod 內進行網絡抓包

點分享

點收藏

點點贊

點在看

總結

以上是生活随笔為你收集整理的不用跑项目，组件效果所见即所得，绝了！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。