不用跑項(xiàng)目，組件效果所見即所得，絕了！

我們?cè)趯懶枨髸r(shí)都會(huì)封裝一些組件，然后會(huì)為該組件定義一些 props ，使其跟業(yè)務(wù)分離，變得更通用。寫完組件后需要驗(yàn)證一下組件的效果，也就需要簡(jiǎn)單 mock 一下數(shù)據(jù)傳進(jìn)去，然后跑一下項(xiàng)目看一下

//?components/card/index.tsx??Card?組件?
//?咱先來(lái)寫個(gè)組件
export?default?function?Card?(props)?{
??const?{?name?}?=?props
??return?(
????
{name}</div>
??)
}

//?index.tsx??項(xiàng)目根目錄
//?組件寫好了，找個(gè)地方引入一下，傳點(diǎn)數(shù)據(jù)進(jìn)去，免得項(xiàng)目崩了
import?Card?form?'card'
export?default?function?App?()?{
??return?(
????"零一"?/>
??)
}

$?#?跑一下項(xiàng)目，看看剛才寫的組件的效果
$?yarn?dev

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

然而，我找到了一個(gè)非常好用的 Vscode 插件 大大簡(jiǎn)化了這個(gè)流程?。。?！

它就是 Preview.js ，一個(gè)用于項(xiàng)目中組件實(shí)時(shí)預(yù)覽的插件

它有什么優(yōu)點(diǎn)？

1. 支持 React（v16+）、Vue2、Vue3、SolidJS，并即將支持 Preact 和 Svelte
2. 無(wú)需啟動(dòng)項(xiàng)目，直接靜態(tài)預(yù)覽組件效果
3. 自動(dòng)識(shí)別組件
4. 自動(dòng)生成 props 的 mock 數(shù)據(jù)
5. 實(shí)時(shí)刷新，無(wú)需瘋狂點(diǎn)保存觸發(fā)
6. 可以針對(duì)同一個(gè)組件生成多個(gè)預(yù)覽，并可快速切換
7. 支持調(diào)整頁(yè)面比例，以及切換不同分辨率的設(shè)備
8. 暗黑模式切換
9. 直接搜索項(xiàng)目中的其它組件，快速切換

香不香？我反正已經(jīng)上手使用過(guò)了，是真的香！之前我自己也做過(guò)組件庫(kù)的項(xiàng)目，寫完一個(gè)組件，就需要寫一個(gè) example 去看看效果，要是用了這個(gè)插件，項(xiàng)目也不用跑，實(shí)時(shí)預(yù)覽，該有多爽?。ㄕ陂_發(fā)組件庫(kù)的同學(xué)看過(guò)來(lái)，福利?。?/p>

再講一下這個(gè)插件的缺點(diǎn)

1. 插件是剛出的，可能會(huì)有一些bug，這是難免的
2. 上述優(yōu)點(diǎn)中，6、7、8都是需要付費(fèi)的，不過(guò)目前可以白嫖，等會(huì)講
3. 待發(fā)現(xiàn)...

但我目前用下來(lái)是沒啥問(wèn)題的

接下來(lái)帶大家體驗(yàn)一下

安裝

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

然后最好重啟一下 VsCode

emmmm，大多數(shù)同學(xué)應(yīng)該會(huì)收到這樣一條報(bào)錯(cuò)信息：

因?yàn)橹貑⒑蟮某跏蓟A段，Preview.js 插件會(huì)安裝一些依賴包，并且它們最低支持的 npm 版本是 7+，估摸著大部分同學(xué)的 npm 包都是小于 7 的，所以還是建議大家想要使用時(shí)切換一下 node 版本，比如用 nvm use 17.5.0，此時(shí)的 npm 版本就到了 8+ 了，滿足了需求，此時(shí)還需要重啟一次

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

基本使用

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

咱們隨便找到項(xiàng)目中的一個(gè)組件打開

可以看到，插件自動(dòng)識(shí)別到了我的 Card 組件，并在上方懸浮了一個(gè) Open Card in Preview.js 的灰色按鈕，點(diǎn)擊以后右邊就會(huì)出來(lái)一個(gè)預(yù)覽窗口了（此時(shí)咱們都還沒啟動(dòng)項(xiàng)目）

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

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

類型修改不能實(shí)時(shí)也算是一個(gè)小缺點(diǎn)，希望后續(xù)可以改進(jìn)一下。如果咱們改了類型，目前只需重啟預(yù)覽窗口就可以了，點(diǎn)底部的刷新是沒用的

Pro 級(jí)別的功能

接下來(lái)是高級(jí)用戶可以使用的功能，我看到他們官網(wǎng)是有申請(qǐng) 30 天免費(fèi)體驗(yàn)資格的，為了本文的效果，我先申請(qǐng)了

申請(qǐng)網(wǎng)址：https://previewjs.com/checkout

填一下自己的郵箱，就申請(qǐng)成功了

然后它會(huì)把一個(gè)兌換碼發(fā)到你的郵箱里

拿著這個(gè)碼去 VsCode 的 Preview.js 預(yù)覽窗口里填寫即可

然后就成功了，頁(yè)面現(xiàn)在多了一堆功能

來(lái)統(tǒng)一體驗(yàn)一下吧

總結(jié)

總體來(lái)說(shuō)這個(gè)插件已經(jīng)很 nice 了，即使不用付費(fèi)版本的功能，也可以滿足基本的需求，而且這個(gè)功能在寫業(yè)務(wù)時(shí)非常有用，大大提高工作效率，真的真的強(qiáng)烈推薦?。。。?/strong>

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