前端开发必备的10个VSCode插件

583 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第5天,点击查看活动详情

1.Live Server

Live Server是我每次换设备装的第一个插件, Live Server启动了一个本地开发服务器,静态和动态页面都可以实时重载。使用体验极佳。

image.png

2.Tabnine

Tabnine和GitHub Copilot这两兄弟我都用了很久,vscode用Tabnine,IDEA用的GitHub Copilot,从实际体验上来说,Tabnine速度快很多,体验相对好一些。有时都写了很长一段了,GitHub Copilot还搁那转圈呢。还需要继续迭代,Tabnine更适合平时使用。

image.png

3.Code Time

每天你有多少时间在写代码?还是在划水?Code Time通过跟踪你的时间,让你对你的生产力负责,并可以分析在哪个项目上工作得最多。超级实用,拖延症必备。

image.png

4.Git History

Git History提供了一个可视化的git日志。不再需要在终端查看git日志。这个扩展也很全面。可以比较各个分支、提交和跨提交的文件。

JetBrains全家桶提供的git服务用着非常舒服,Git History算是一个平替,虽然体验还是有差距,不过用习惯还是ok的。

image.png

5.TODO Highlight

WebStorm或者IDEA可以直接写todo,并且可以直接管理。TODO Highlight又是一个平替,在vscode中直接写注释,经常写着写着就忘记了。TODO Highlight 可以让事项更加突出。

image.png

6.vscode-icons

可可爱爱,给你的vscode添加一些可爱的小图标,除了增加识别度,让开发心情都好起来了。

image.png

image.png

7.JavaScript Code Snippets

虽然VSCode包括内置的JS智能提示,但JS代码片段通过增加一系列的导入/导出触发器、类帮助器和方法触发器来增强这种体验。 JavaScript Code Snippets支持JS、TypeScript、JS React、TS React、HTML和Vue。在VSCode市场上,其他类型的代码片段,如Angular,也可以随时使用。

3e69c53759827ff0e63214a2f7e6a16.png

8.Polacode

分享代码截图超酷的小插件。

image.png

9.colorize

colorize是一个强大的生产力工具。使用时,可以提高工作效率。Colorize是在考虑到CSS的情况下创建的,它通过css变量、预处理器变量、hsl/hsla颜色、跨浏览器颜色、exa、rgb、rgba和argb的彩色背景,帮助你立即将CSS颜色可视化。

1653830532(1).png

10.Code Runner

有时,你不需要运行你的整个项目,只需要其中的一小段。这就是Code Runner的用武之地。这个VS Code插件支持多种语言,可以通过预定义的键盘快捷键或在鼠标的帮助下运行高亮代码。

1653830656(1).png