不用跑專案,元件效果所見即所得,絕了!

語言: CN / TW / HK

大家好,我是 零一 ,看到一個好東西,忍不住來分享一下。

我們在寫需求時都會封裝一些元件,然後會為該元件定義一些 props ,使其跟業務分離,變得更通用。寫完元件後需要驗證一下元件的效果,也就需要簡單 mock 一下資料傳進去,然後跑一下專案看一下

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

這套流程,你是不是很熟悉?大家可能都是這麼幹的,看完效果後還要回過頭去把剛剛不要的測試程式碼都刪掉

然而,我找到了一個非常好用的 Vscode 外掛 大大簡化了這個流程!!!!

它就是 Preview.js ,一個用於專案中元件實時預覽的外掛

它有什麼 優點

  1. React(v16+)
    Vue2
    Vue3
    SolidJS
    Preact
    Svelte
    
  2. 無需啟動專案,直接靜態預覽元件效果

  3. 自動識別元件

  4. 自動生成 props 的 mock 資料

  5. 實時重新整理,無需瘋狂點儲存觸發

  6. 可以針對同一個元件生成多個預覽,並可快速切換

  7. 支援調整頁面比例,以及切換不同解析度的裝置

  8. 暗黑模式切換

  9. 直接搜尋專案中的其它元件,快速切換

香不香?我反正已經上手使用過了,是真的香!之前我自己也做過元件庫的專案,寫完一個元件,就需要寫一個 example 去看看效果,要是用了這個外掛,專案也不用跑,實時預覽,該有多爽啊(正在開發元件庫的同學看過來,福利啊)

再講一下這個外掛的 缺點

  1. 外掛是剛出的,可能會有一些bug,這是難免的

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

  3. 待發現...

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

接下來帶大家體驗一下

安裝

直接在 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/

我是 零一 ,分享技術,不止前端,我們下期見~

創作不易, 加個 點贊、在看   支援一下哦!