快捷導(dǎo)航

前端不用跑項(xiàng)目vscode組件效果所見(jiàn)即所得

更新時(shí)間：2022年04月26日 09:33:36 作者：「零一」

這篇文章主要為大家介紹了一款不用跑項(xiàng)目的vscode組件所見(jiàn)即所得效果的使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

組件封裝及需求效果

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

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

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

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

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

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

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

Preview.js優(yōu)點(diǎn)

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

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

Preview.js插件的缺點(diǎn)

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

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

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

安裝

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

安裝插件

然后最好重啟一下 VsCode

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

npm 版本過(guò)低

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

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

preview.js 依賴包安裝成功

基本使用

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

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

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