怎样使用vscode开发前端,前端开发vscode必备插件
本文主要介绍如何在不运行项目的情况下，使用一个具有所见即所得效果的vscode组件。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
组件封装及需求效果Preview.js优点Preview.js插件缺点安装基本采用Pro级功能总结。
组件封装及需求效果
我们在写需求的时候，会封装一些组件，然后为这个组件定义一些道具，让它脱离业务，变得更通用。写完组件后，需要验证组件的效果，也就是需要简单的把数据模拟进去，然后运行项目看看。
//card/index.tsx卡组件
//我们先写一个组件
导出默认功能卡(道具){
const { name }=props
返回(
div{name}/div
)
}
//index.tsx项目根目录
//组件写好了，找个地方介绍一下，送点数据进去，免得工程崩溃。
导入卡片表单卡片
导出默认函数App () {
返回(
卡名=零一/
)
}
$ #运行项目并查看刚刚编写的组件的效果
$纱线开发
你熟悉这个过程吗？每个人都可能这样做。看完结果后，他们必须回去删除所有他们不想要的测试代码。
不过我发现了一个非常好用的Vscode插件，大大简化了这个过程！
它是Preview.js，一个用于项目中组件实时预览的插件。
Preview.js优点
支持React(v16)、Vue2、Vue3和SolidJS，并将很快支持Preact和Svelte。无需启动项目，直接静态预览组件，自动识别组件自动生成道具的模拟数据。可实时刷新mock数据，无需疯狂存点触发即可为同一组件生成多个预览，并可快速调整页面比例，切换不同分辨率设备的黑暗模式直接搜索项目中的其他组件，快速切换是否好闻。反正我已经用过了，真的很好闻！我自己以前做过一个组件库项目。写完一个组件，我需要写一个例子来看看效果。如果我用这个插件，项目就不用运行了，可以实时预览。会有多酷？(正在开发组件库的同学会看到。福利。)
Preview.js插件的缺点
插件刚出来，可能会有一些bug，这是不可避免的。以上优势中，6，7，8都需要付出，但目前可以是白嫖，以后会发现.但是我目前用起来没有问题。
接下来就带你去体验一下。
安装
直接在VsCode的插件市场搜索：Preview.js，安装即可。
那你最好重启VsCode。
Emmmm，大多数学生应该会收到这样的错误信息：
因为Preview.js插件会在重启后的初始化阶段安装一些依赖包，而它们支持的最低npm版本是7。估计大部分同学的npm包都是7以下的，所以建议大家想用的时候切换一下节点版本，比如用nvm用17.5.0。此时npm版本将达到8，满足需求。这时，你需要重新启动它。
耐心等几秒钟，等它所有的依赖包都安装好了就ok了。
基本使用
为了方便，我就以React的代码为例，不过刚才提到的那些库也是支持的。你可以自己试试。
让我们在项目中找到一个组件并打开它。
可以看到，插件自动识别我的卡片组件，在它的上方悬浮着一个Preview.js中打开卡片的灰色按钮。点击之后，右边会出现一个预览窗口(此时我们还没有启动项目)。
如你所见，右下角也帮助我们生成了这个组件所需要的道具的模拟数据，但这个前提是你的项目是TS的，而且道具的类型是有限的，否则不行(我试过)。
一切(添加新组件、修改文本、修改样式……)都是实时修改的(除了修改道具类型)。让我们看一看。
不能实时修改类型也是一个小缺点。希望以后可以改进。如果换类型，目前只需要重启预览窗口，点底部刷新没用。
Pro 级别的功能
接下来，高级用户可以使用的功能。我看到他们有资格在官网申请30天免费体验。为了这篇文章的效果，我先申请了。
申请地址：https://previewjs.com/checkout
填写你的电子邮件，你的申请就会成功。
然后它会发送一个交换码到你的邮箱。
取这段代码，填充到VsCode的Preview.js窗口中。
然后它成功了，现在这个页面有了一堆特性。
大家统一体验一下吧。
总结
总的来说这个插件已经很好看了。不需要付费版本的功能也能及时满足基本需求。而且这个功能在写业务的时候非常有用，大大提高了工作效率。真的真的强烈推荐！
preview . js:https://previewjs.com/
我是零一，分享技术，不只是前端，我们下期再见~
这就是前端项目不运行所见即所得效果的细节。关于前端项目vscode组件效果的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。