不用跑專案，元件效果所見即所得，絕了！

語言: CN / TW / HK

時間 2022-04-13 10:06:44 前端印象

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

我們在寫需求時都會封裝一些元件，然後會為該元件定義一些 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 ，一個用於專案中元件實時預覽的外掛

它有什麼優點？

React（v16+）
Vue2
Vue3
SolidJS
Preact
Svelte

無需啟動專案，直接靜態預覽元件效果
自動識別元件
自動生成 props 的 mock 資料
實時重新整理，無需瘋狂點儲存觸發
可以針對同一個元件生成多個預覽，並可快速切換
支援調整頁面比例，以及切換不同解析度的裝置
暗黑模式切換
直接搜尋專案中的其它元件，快速切換

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

再講一下這個外掛的缺點

外掛是剛出的，可能會有一些bug，這是難免的
上述優點中，6、7、8都是需要付費的，不過目前可以白嫖，等會講
待發現...

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

接下來帶大家體驗一下

安裝

直接在 VsCode 的外掛市場搜尋： Preview.js ，安裝即可

然後最好重啟一下 VsCode

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

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

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