知码 潜水
  • 0发帖数
  • 0主题数
  • 0关注数
  • 0粉丝
开启左侧

提高开发效率的几款Vscode的一些插件,真的很香

[复制链接]
知码 发表于 2022-2-11 05:01:06 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
前言

俗话说:工欲善其事,必先利其器。
一个高效的开发者离不开一个优秀的开发工具,对于前端开发来说我个人保举的开发工具是: VS Code
官网地址如下:
https://code.visualstudio.com/
那今天就来先容一下几款在 vscode 中比较实用的插件。
1、Live Server 静态服务器

使用live server 插件本地开发实现热加载,实时查看网页效果

                               
登录/注册后可看大图

在 HTML 文件上点右键,选择 Open With Live Server

                               
登录/注册后可看大图

当改动 HTML 的时间,浏览器中的内容也会时时更新。
2、Code Runner 代码运行器

Code Runner已经有了超过400万的下载量,支持了JS, TS, Node.js, Python, C++, Java, PHP, Perl, Ruby, Go等超过40种的语言。

                               
登录/注册后可看大图

以js为例,打开一个js文件

                               
登录/注册后可看大图

3、Image Preview 图片预览

在编写css,再也担心写错图片地址啦! 其支持在htmlcss文件内里,当有使用图片路径的时间,在左边实现小的预览器,一眼就知对与错。

                               
登录/注册后可看大图

具体用法,在使用到图片的时间,在编辑器的左边会出现图片的预览

                               
登录/注册后可看大图

还是非常方便的,可以实时地检查出哪个图片的路径出错了
4、Import Cost 依靠包大小提示

这个插件可以让我们看出依靠的第三方包体积有多大。也挺方便

                               
登录/注册后可看大图

安装完成之后,打开一个有依靠包的文件,可以看到依靠包的大小

                               
登录/注册后可看大图

5、Wrap Console Log 快速的输出变量

这个功能对我来说真的是太好用了,为了快速输出变量,我都界说好了一个代码段,还有快捷键。有了这个插件就可以省心了




                               
登录/注册后可看大图


                               
登录/注册后可看大图

总结

以上就是我保举给大家的几个比较好用的插件。如果大家有更好的插件可以保举一下,大家一起学习。
另外,vscode 安装上插件之后,会比较吃内存,可能会卡,大家按自己的实际情况来安装插件。
末了祝大家工作愉快

精彩评论6

新年快乐www 发表于 2021-8-22 02:57:46 | 显示全部楼层
最后一个什么效果啊 没看出来
不知为何有些许凄凉 发表于 2021-8-20 22:05:48 | 显示全部楼层
只有最后一个没用过[捂脸]
vaysalee 发表于 2021-8-20 17:01:58 | 显示全部楼层
转发了
發發嗨 发表于 2021-8-22 22:47:23 | 显示全部楼层
转发了
琉璃谷的小鱼儿 发表于 2021-8-21 23:02:37 | 显示全部楼层
转发了
大鹏和娜娜 发表于 2021-8-21 22:16:09 | 显示全部楼层
转发了
猜你喜欢
在线客服邮箱
wxcy#wkgb.net

邮箱地址#换为@

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城