![](https://img-blog.csdnimg.cn/img_convert/519188b6baca23a204ce9fc9e63f996d.jpeg)
VSCode 轻量、开源,新鲜下载的 VSCode 可谓是身无长物、一穷二白,连个项目管理的功能都没有。
身轻如燕的 VSCode 对于后端开发说可能有点幼稚,但对于前端来说刚刚好,毕竟不需要搞什么 Docker、数据库等等,装俩 VSCode 插件,打开网页,就能开工了。
这篇文章将从前端开发者的角度来介绍一些裸 VSCode 必备插件,打造一个前端友好的开发 IDE。【推荐学习:vscode教程、编程视频】
1. Project Manager
Project Manager 用于管理项目,有了它,可以帮你在 VSCode 中快速地在各个项目中切换,不需要痛苦地从文件目录中一级一级最终选到你想要的项目文件。
![](https://img-blog.csdnimg.cn/img_convert/17db1f6b375812b5e47f2b2a8052daa4.png)
只需要在 Palette 输入 Save Project,回车保存当前项目。
![](https://img-blog.csdnimg.cn/img_convert/07e02444d592b8d9e1161b418ee2308e.png)
然后可以在右侧菜单查看你添加的项目,点击指点项目就能切换到该项目,非常方便。
![](https://img-blog.csdnimg.cn/img_convert/cab3487fa91ad208bcabb49b77db13dc.png)
它还提供了 Tag 标签,可以细分你的项目。
![](https://img-blog.csdnimg.cn/img_convert/843d5737fac71e7dc64236195e3a3106.gif)
2. GitLens
GitLens 从名字就能知道它是干嘛的,VSCode 内置 Git 帮助加上这个插件交互体验是优于 Webstorm 的。
![](https://img-blog.csdnimg.cn/img_convert/34cd9c5e3e859600a71f6ee9887bd953.png)
它可以方便地查看代码修改信息。
![](https://img-blog.csdnimg.cn/img_convert/ef6f004f10ba94e768bed62fb89d6951.gif)
可以查看某一行的改动信息
![](https://img-blog.csdnimg.cn/img_convert/6c4ffae3c946dc66c80650296fd29824.png)
Hover 上去还能查看具体信息
![](https://img-blog.csdnimg.cn/img_convert/dd884b717ca2634668f7a8a4c8ce0bc5.png)
GitLens 的介绍页有万字多,可见功能之齐全,这里就不啰嗦了。
3. Tabout
![](https://img-blog.csdnimg.cn/img_convert/cb1ceb2adfd34bed0bcde9b13cf82f4c.png)
VSCode 的 Tab 键默认输出 \t
,对于习惯用过 WebStorm、Eclipse 的人来说非常不舒服,想要在括号处用 Tab 跳出,就可以利用到这个 TabOut。
![](https://img-blog.csdnimg.cn/img_convert/439658f3cb31287609e039784e315c25.gif)
4. Live Server
![](https://img-blog.csdnimg.cn/img_convert/3925d424ce171dd1a324256d1e318775.png)
Live Server 也算是有口皆碑,它可以实时去热加载并更新代码。
![](https://img-blog.csdnimg.cn/img_convert/1ab29cd663a85eb0a5927baafe4cb610.gif)
实际上是起了一个 Websocket 来实现代码更新的,Live Server 在编写一些测试 HTML 页面确实好用。
5. Code Spell Checker
![](https://img-blog.csdnimg.cn/img_convert/1358338fa61d78717b96b457fa581fa0.png)
在拼写一些变量方法的时候,我们可以会拼错单词,Code Spell Checker 可以帮助检测你的错误。
![](https://img-blog.csdnimg.cn/img_convert/dc5cd7fae2037b26f20fec1421e35f6f.gif)
当检测出错误单词,你还可以看看它给你的一些单词建议:
![](https://img-blog.csdnimg.cn/img_convert/9f8e2c2a6bf88e79e3ec5a3152b02d7c.gif)
6. Image Preview
![](https://img-blog.csdnimg.cn/img_convert/6f324270568627d1f4b258d70943423c.png)
当项目中引入多个图片 URL 的时候,想要预览每张图片是一张痛苦的事情,Image preview 解决了这样的事情。
![](https://img-blog.csdnimg.cn/img_convert/99b33dc6fac714acf8ee65daf4332e7a.png)
7. Import Cost
![](https://img-blog.csdnimg.cn/img_convert/9238afb83c716573de11b46a62f55926.png)
在前端项目中,我们经常需要导入各类的依赖包,通过 Import Cost 可以查看导入包的大小,便于优化。
![](https://img-blog.csdnimg.cn/img_convert/5ea0f8a02da3f7b31966eb39d116baa0.gif)
8. Parameter Hints
![](https://img-blog.csdnimg.cn/img_convert/71e6f2082359108dd4aaf6befe4b1ab8.png)
Parameter Hints 会展示函数的参数名称。
![](https://img-blog.csdnimg.cn/img_convert/9dd085dce0a485d88f5984285f69b037.png)
9. Highlight Matching Tag
![](https://img-blog.csdnimg.cn/img_convert/4f67a275d8ab66bd84d8f90ceb2be08a.png)
Highlight Matching Tag 可以高亮你的 HTML、JSX 代码配对符号。
![](https://img-blog.csdnimg.cn/img_convert/6b8ae6156566496f9c62383f3cdd86e1.gif)
10. indent-rainbow
![](https://img-blog.csdnimg.cn/img_convert/10b07ae135adc6e8c00a27ba407cd6ed.png)
Indent-rainbow 把代码缩进也可以变成好看的彩虹 ?。
![](https://img-blog.csdnimg.cn/img_convert/be0673b9a2133851907eb715105fa8e4.png)
11. Blockman
![](https://img-blog.csdnimg.cn/img_convert/40f151dae66f9164125e079be781368b.png)
Blockman 可以会高亮框出你当前所处的代码编辑块。
![](https://img-blog.csdnimg.cn/img_convert/6bb3584c80559bfd59d9b9e5e6a04034.png)
后记
对于 VSCode 来说,插件数量多入牛毛,对于常见开发场景来说,有很多对应的处理插件,需要用到就在 Marketplace 搜索一下即可,比如 React 项目:
![](https://img-blog.csdnimg.cn/img_convert/dce9cfb6df8fe75e4f09ac58636e335d.png)
值得注意的是,装过多的插件并不见得是一件好事,VSCode 的插件机制也是事件驱动的,过多的插件带来的弊端一方面是插件功能冲突,另一方面是性能消耗,也就是让 VSCode 变得卡顿。
更多关于VSCode的相关知识,请访问:vscode基础教程!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)