• 周五. 4 月 24th, 2026

物嫩软件资讯网

软件资讯来物嫩

VScode 常用插件推荐,非常全面

admin@wunen

4 月 10, 2025



一、主题美化



Peacock

可以为 VScode 中的不同项目添加不同的颜色主题,方便区分不同项目。



Material Theme

为 VScode 提供 Material Design 风格的主题。



Material Theme Icons

为 VScode 中的文件和文件夹添加 Material Design 风格的图标。



background

给 Visual Studio Code 添加背景,也可以自定义背景图片。



Power Mode

炫酷的敲代码插件。



Rainbow CSV

对 CSV 文件进行语法高亮,方便查看和编辑。


效果图:



Indent Rainbow

为缩进添加彩虹色条带,方便识别缩进层次。


效果图:



Polacode

生成漂亮的代码截图的插件。


效果图:



二、检查格式化



ESLint

用于 JavaScript/TypeScript 代码的语法检查和格式化。



Prettier – Code formatter

代码格式化插件,支持多种语言。



Prettier ESLint

代码格式化。



Stylelint

CSS代码检查工具,包括捕捉错误、最佳实践、控制可以使用的语言特性和强制代码风格规范。


效果图:



三、编程美化



Document This

主要针对JavaScript 和 TypeScript 语言生成注释。


效果图:



Better Comments

一款美化注释的插件,可以根据不同种类的注释,显示不同的颜色,一目了然,提高注释可读性。


效果图:



Rainbow Brackets

在代码中使用彩虹色高亮括号,方便识别括号嵌套层次。


效果图:



四、集成插件



Docker

集成 Docker 环境,方便在 VScode 中管理容器和镜像。



PostCode

在 vscode 里面使用 postman


效果图:



REST Client

可直接在 VScode 中发起 HTTP 请求,方便测试和调试 API。


效果图:



Live Server

为 HTML、CSS 和 JavaScript 提供实时预览和自动刷新,在浏览器中实时预览静态网页的插件。


效果图:



Code Runner

支持多种编程语言的代码运行器。



Tabnine

AI 辅助自动补全插件,支持多种语言。


效果图:



GitLens

用于集成 Git 功能,提供更多的 Git 信息和可视化操作。


效果图:



Git History

可以查看 Git 历史记录和提交详细信息。


效果图:



Remote Development

远程开发插件,可以在 VScode 中远程连接到远程主机或容器中开发。


效果图:



五、开发效率



Vetur/volar

vue/vue3语法高亮、智能感知、Emmet等, 包含格式化功能。



Codelf

变量命名神器

效果图:



WXML – Language Service

微信小程序 .wxml 文件代码高亮,标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 code snippets)。


效果图:



XML Tools

XML 文件增强插件,提供 XML 文件的语法提示、自动补全、格式化等功能。



Auto Rename Tag

自动重命名成对的HTML标记,修改开始标签,结束标签会同步修改。


效果图:



json2ts


效果图:



px to rem & rpx (cssrem)

自动换算单位的插件。很简单,出现提示以后回车即可。


效果图:



CSS Peek

可以通过点击类名迅速定位到样式的定义。但不支持less、stylus的嵌套


效果图:



IntelliSense for CSS/SCSS/Less

提供 CSS、SCSS 和 Less 的语法提示和自动补全。


效果图:



Path Intellisense

提供文件路径的自动补全和提示。


效果图:



Image preview

预览代码中图片的引用,鼠标移上去就会有小窗展示图片。


效果图:



Trailing Spaces

把尾随空格显示出来。


效果图:



Auto Close Tag

自动闭合 HTML/XML 标签的插件,避免输入错误的标签闭合造成的问题。


效果图:



HTML CSS Support

在 HTML 文件中提供 CSS 的语法提示和自动补全功能。



Bookmarks

为代码添加书签,方便在文件中快速跳转。


效果图:



Error Lens

将编辑器诊断出的警告、错误、语法问题(提示的波浪线)等,以用颜色填充行背景的方式突出提示,并将诊断信息显示在尾部。


效果图:



Project Manager

项目管理,方便进入任何项目


效果图:



六、数据分析



VS Code Counter

统计代码总行数、注释行数、空白行数,以及使用的语言。


效果图:



Import Cost

在导入语句中显示导入模块的大小的插件。


效果图:



filesize

在状态栏中显示当前文件大小。


效果图:



七、学习一下



Code Spell Checker

检查代码中单词拼写是否正确,当单词不正常的时候,就会在下方出现波浪线进行提示,还可以自定义词典,忽略某个单词的检查等。


效果图:



A-super-translate

划词翻译。鼠标停留选中几秒就会查看翻译内容。


效果图:



会了吧

打开源码可以自动分析所有包含的英语单词,并显示解释结果,先学单词再看代码



八、摸鱼神器



LeetCode

在线LeetCode刷题


效果图:



fisher

独创4种最隐蔽最安全摸鱼方式,其中猥琐模式/安全模式,极为隐蔽,瞒天过海,暗度陈仓。


效果图:



4399 on VSCode

玩一会 4399 小游戏, 放松身心, 劳逸结合, 更好地开始接下来的工作 。


效果图:



VSC Netease Music

网易云音乐程序员版,使用 Webview 实现,通过 HTMLAudio​Element 播放音乐,不依赖命令行播放器


效果图:



韭菜盒子

VSCode 里也可以看股票 & 基金实时数据,做最好用的投资插件。

效果图:



Rainbow Fart

VSCode Rainbow Fart是一个在你编程时持续夸你写的牛逼的扩展,可以根据代码关键字播放贴近代码意义的真人语音。



九、其他



Partial Diff

查看哪里修改了代码、查看输出的日志信息有什么区别等等。



Chinese

为 VS Code 提供本地化中文界面。



Todo Tree

可以扫描代码中的注释并生成待办事项列表,方便管理任务。


效果图:



Vim

为 VScode 添加 Vim 的编辑模式。



Markdown Preview Enhanced

提供更多的 Markdown 预览和导出选项,预览窗口内置于 vscode 中。


效果图:



Markdown PDF

MarkdownPDF可将Markdown文件转换为pdf、html、png或jpeg文件


效果图:



Markdown All in One

为 Markdown 提供语法高亮、预览、导出等功能。


效果图:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注