前言

俗话说：工欲善其事，必先利其器。

一个高效的开发者离不开一个优秀的开发工具，对于前端开发来说我个人推荐的开发工具是: 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，再也担心写错图片地址啦！ 其支持在html和css文件里面，当有使用图片路径的时候，在左边实现小的预览器，一眼就知对与错。

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

还是非常方便的，可以及时地检查出哪个图片的路径出错了

4、Import Cost 依赖包大小提示

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

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

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

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

总结

以上就是我推荐给大家的几个比较好用的插件。如果大家有更好的插件可以推荐一下，大家一起学习。

另外，vscode 安装上插件之后，会比较吃内存，可能会卡，大家按自己的实际情况来安装插件。

最后祝大家工作愉快