文章简介

本文介绍最新
  
  
  
  
  
  、最实用 
  
  
  
  
  
 、最强大的 vscode 精选扩展
  
  
  
  
  
  。好用的扩展
  
  
  
  
  
  ，犹如神兵利器 
  
  
  
  
  
 ，帮助程序员在代码的世界中 


 


 


 


 


 


，所向披靡
 
 
 
 
 
 ，战无不胜！

作者介绍

随易出品  
   
   
   
   
   
 ，必属精品 

 

 

 

 

 

，只写有深度

 

 

 

 

 

 ，有质量的干货文章！

用一些标签            ，简单介绍一下本文作者的特点 
  
  
  
  
  
 。

自由职业者（现居农村） 独立开发者（正在运营和开发自己的效率工具） 理想主义者（重构狂人 
 

 
 

 
 

 
 

 
 

 
 

，每个代码都必须有灵魂） 偏执狂与强迫症（啊啊啊啊啊） 网文小说作者（2015 年太监











，2023 年重新开始写小说） 开源轮子大师（自 2019 年以来                  ，创建数十个持续更新维护的开源项目） web3 学习者（下一代互联网 
 
 
 
 
 
 
 
 
 
 
 
，魅力无限） 代码雕刻工匠（写代码犹如雕刻一个作品

















，方寸与毫厘之间            ，方成正宗）

社交联系

微信：c91374286 公众号：陈随易 博客：https://chensuiyi.com

写作理念

请注意 
 
  
 
  
 
  
 
  
 
  
 
 ，本文并没有完结 


 


 


 


 


 


。

那么











，为什么没有写完的文章就发出来了呢？因为
  
  
  
  
  
  ，笔者的写作理念认为 
  
  
  
  
  
 ，一篇高质量的好文 


 


 


 


 


 


，不是一次就写成的
 
 
 
 
 
 。随着时间和经验的积累
 
 
 
 
 
 ，文章应该不定期修改调整  
   
   
   
   
   
 ，完善更新 

 

 

 

 

 

，不断打磨

 

 

 

 

 

 ，以至最佳  
   
   
   
   
   
 。所以            ，需要查看本文最新内容 
 

 
 

 
 

 
 

 
 

 
 

，请关注或联系笔者











，以获得最新的优质内容 

 

 

 

 

 

。但是                  ，数十个文章平台和技术社区的文章更新维护 
 
 
 
 
 
 
 
 
 
 
 
，需要的时间 


 


 


 


 


 


、精力都是非常大的

















，并且笔者为自由职业            ，没有固定收入 
 
  
 
  
 
  
 
  
 
  
 
 ，部分高质量文章将会进行收费











，请各位读者们
  
  
  
  
  
  ，跟随自己的意愿 
  
  
  
  
  
 ，查看需要付费的文章

 

 

 

 

 

 。

版权信息

本作者所有文章 


 


 


 


 


 


，皆为原创
 
 
 
 
 
 ，未具体说明为 可转载 类型  
   
   
   
   
   
 ，请勿转载 

 

 

 

 

 

，侵权必究            。 本文转载类型：可随意转载

 

 

 

 

 

 ，保留原文出处即可 
 

 
 

 
 

 
 

 
 

 
 

。

是否付费

否

其他说明

意见反馈
 
 
 
 
 
 、插件推荐等            ，请联系笔者 推荐指数仅为笔者个人认为的有用程度 
 

 
 

 
 

 
 

 
 

 
 

，不代表插件本身质量和作用

写作背景

vscode 基本是笔者目前唯一使用的编辑器











，真香定律在这个编辑器上                  ，体现得淋漓尽致











。

为了最大化得发挥出 vscode 真正的实力 
 
 
 
 
 
 
 
 
 
 
 
，在笔者十级强迫症的驱使下

















，花费半天时间            ，把所有 vscode 扩展下载量大于 1000 的插件 
 
  
 
  
 
  
 
  
 
  
 
 ，全部浏览并过滤了一遍











，将自认为强大好用的插件
  
  
  
  
  
  ，甄选出来 
  
  
  
  
  
 ，分享给有缘人                  。

文章正文

注意：以下资料 


 


 


 


 


 


，截止至本文发布日期

GitLens（git 操作插件）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 GitKraken 功能 git 需要的一切
 
 
 
 
 
 ，它都有 推荐理由 git 是现代软件协作的基石  
   
   
   
   
   
 ，其重要性不言而喻 

 

 

 

 

 

，本插件

 

 

 

 

 

 ，更是将 vscode 中的 git 操作无限增强！ 扩展地址 GitLens（git 操作插件）

Eva Theme（vscode 主题）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 fisheva 功能 调整和优化 vscode 配色 推荐理由 其他 vscode 颜色主题还有不少            ，但我独爱它 
 

 
 

 
 

 
 

 
 

 
 

，不信











，你试试 
 
 
 
 
 
 
 
 
 
 
 
。 扩展地址 Eva Theme（vscode 主题）

Markdown All in One（markdown 操作增强）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Yu Zhang 功能 markdown 操作增强 推荐理由 vscode 自带的 markdown 操作还是比较简单                  ，这个极大提高了 markdown 的操作体验和自动化 扩展地址 Markdown All in One（markdown 操作增强）

Markdown Preview Enhanced（markdown 预览增强）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Yiyi Wang 功能 markdown 预览增强 推荐理由 切换 markdown 预览主题  
 
 
 
 
 
 
 
 
 
 
 
，导出为 pdf  
   
   
   
   
   
 、html 等格式文件

















，鼠标上传图片等 扩展地址 Markdown Preview Enhanced（markdown 预览增强）

Markdown Image（markdown 图片上传）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Hancel.Lin 功能 从粘贴板一键粘贴图片到本地目录 

 

 

 

 

 

、七牛云存储

 

 

 

 

 

 、SM.MS 等 推荐理由 手动创建目录            ，设置图片名称 
 
  
 
  
 
  
 
  
 
  
 
 ，填写 markdown 图片路径的方式太原始了！是程序员就用这个！ 扩展地址 Markdown Image（markdown 图片上传）

如下截图中的图片地址











，就是通过这个插件自动生成的

Paste from Web（markdown 图片下载）

推荐指数：⭐⭐⭐

指标 内容 作者 BishopCodes 功能 将在线图片地址
  
  
  
  
  
  ，下载到本地目录中 推荐理由 解决了 markdown 图片的下载问题 
  
  
  
  
  
 ，唯一不足之处就是 


 


 


 


 


 


，自定义下载目录功能不够强大

















。不过
 
 
 
 
 
 ，关注我  
   
   
   
   
   
 ，我会出手 扩展地址 Paste from Web（markdown 图片下载）

Markdown Paste（markdown 图片下载）

推荐指数：⭐⭐⭐

指标 内容 作者 telesoho 功能 一键下载 markdown 文件中的所有在线图片到本地 推荐理由 解决了 markdown 多图下载问题 

 

 

 

 

 

，唯一不足之处就是

 

 

 

 

 

 ，自定义下载目录功能不够强大            。不过            ，关注我 
 

 
 

 
 

 
 

 
 

 
 

，我会出手 扩展地址 Markdown Paste（markdown 图片下载）

Image preview（图片预览）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Kiss Tamás 功能 在编辑器左侧代码行数左边











，预览该行的图片路径 推荐理由 有些小图片            、小图标在左侧预览查看                  ，可以一目了然图片是否正确 扩展地址 Image preview（图片预览）

filesize（文件大小）

推荐指数：⭐⭐⭐

指标 内容 作者 Matheus Kautzmann 功能 在编辑器底部状态栏显示当前文件的大小 推荐理由 当需要看文件大小的时候 
 
 
 
 
 
 
 
 
 
 
 
，还是很有用的

















，不过不是必备插件            ，三颗星 扩展地址 filesize（文件大小）

Git Graph（git 提交图形化展示）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 mhutchie 功能 以可视化方式 
 
  
 
  
 
  
 
  
 
  
 
 ，展示提交信息 推荐理由 弥补了 gitlens 的提交可视化不直观的问题 扩展地址 Git Graph（git 提交图形化展示）

驼峰翻译助手（变量名翻译）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 mhutchie 功能 纠结怎么取变量? 中文一键翻译转换成常用大小驼峰等格式 推荐理由 想变量名太难了！想英文变量名











，更难！用这个就对了！ 扩展地址 驼峰翻译助手（变量名翻译）

别名路径跳转（代码路径跳转）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 lihuiwang 功能 别名路径跳转插件
  
  
  
  
  
  ，支持任何项目 
  
  
  
  
  
 ，可以自由配置映射规则 


 


 


 


 


 


，自由配置可缺省后缀名列表 推荐理由 导入的方法 
 

 
 

 
 

 
 

 
 

 
 

、函数











、组件
 
 
 
 
 
 ，需要查看他们的代码实现  
   
   
   
   
   
 ，用此插件 

 

 

 

 

 

，可以方便地根据项目具体架构进行自定义跳转设置 扩展地址 别名路径跳转（代码路径跳转）

Bookmarks（书签）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Alessandro Fragnani 功能 给当前行打个书签

 

 

 

 

 

 ，然后            ，跳到这来 推荐理由 有时候写个功能 
 

 
 

 
 

 
 

 
 

 
 

，需要在当前页面不同的位置进行操作











，打几个标记互相跳转                  ，可以减少鼠标滚动的低效操作 扩展地址 Bookmarks（书签）

Browse Lite（vscode 中的浏览器）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Anthony Fu 功能 在 vscode 里面 
 
 
 
 
 
 
 
 
 
 
 
，浏览页面和项目 推荐理由 简单                  、轻量 
 
 
 
 
 
 
 
 
 
 
 
、方便

















，还可以调试            ，安东尼出品 
 
  
 
  
 
  
 
  
 
  
 
 ，也属精品 扩展地址 Browse Lite（vscode 中的浏览器）

Change Case（修改变量名风格）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 hjdarnel 功能 一键调整变量名风格 推荐理由 这类插件特别多！目前我用这个











，因为它比其他的要新
  
  
  
  
  
  ，瑕疵呢就是 
  
  
  
  
  
 ，不支持鼠标右键操作 


 


 


 


 


 


，放心
 
 
 
 
 
 ，我会出手 扩展地址 Change Case（修改变量名风格）

Comment Divider（分割线注释）

推荐指数：⭐⭐⭐

指标 内容 作者 stackbreak 功能 一键生成分隔线注释 推荐理由 还在手动画分隔线？程序员  
   
   
   
   
   
 ，不要做这种傻事！来吧 

 

 

 

 

 

，看看这个 
 
  
 
  
 
  
 
  
 
  
 
 。 扩展地址 Comment Divider（分割线注释）

Comment Divider（分割线注释）](https://static.yicode.tech/images/202301/20230123121037.png)

DotENV（环境变量语法高亮）

推荐指数：⭐⭐⭐

指标 内容 作者 mikestead 功能 为 dotenv 文件提供语法高亮 推荐理由 怎么说呢

 

 

 

 

 

 ，可有可无            ，但是 
 

 
 

 
 

 
 

 
 

 
 

，就像那句话











，有比没有好











。 扩展地址 DotENV（环境变量语法高亮）

i18n Ally（多语言操作）

推荐指数：⭐⭐⭐⭐

指标 内容 作者 Lokalise 功能 i18n 多语言操作增强 推荐理由 怎么说呢                  ，可有可无 
 
 
 
 
 
 
 
 
 
 
 
，但是

















，就像那句话            ，有比没有好
  
  
  
  
  
  。 扩展地址 i18n Ally（多语言操作）

Inline fold（css 类名聚合）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Mohammed Alamri 功能 将 class 的多个类名变成三个点 推荐理由 原子化类党的福利！满屏幕的 class 吓人吗？用这个干掉他们！ 扩展地址 Inline fold（css 类名聚合）

Live Sass Compiler（scss/sass 自动编译）

推荐指数：⭐⭐⭐

指标 内容 作者 Glenn Marks 功能 实时编译 sass 或 scss 到 css 推荐理由 当需要写传统 html/css/js 的时候 
 
  
 
  
 
  
 
  
 
  
 
 ，就不要再写 css 了











，用这个插件
  
  
  
  
  
  ，写 scss 
  
  
  
  
  
 ，自动且实时编译为 css 扩展地址 Live Sass Compiler（scss/sass 自动编译）

Live Server（本地静态服务器）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Ritwick Dey 功能 本地启动一个开发服务器 


 


 


 


 


 


，显示静态和动态内容 推荐理由 比如
 
 
 
 
 
 ，vue 项目打包后  
   
   
   
   
   
 ，想要预览 dist 目录下打包后的项目效果 

 

 

 

 

 

，那就用这个 
  
  
  
  
  
 。 扩展地址 Live Server（本地静态服务器）

Prettier（代码宽松格式化）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Prettier 功能 代码格式化 推荐理由 使用比较宽松的规则格式化代码

 

 

 

 

 

 ，跟 js 的自由随心很搭哦 


 


 


 


 


 


。 扩展地址 Prettier（代码宽松格式化）

Random Something（中国特色的随机内容生成工具）

推荐指数：⭐⭐⭐⭐

指标 内容 作者 Prettier 功能 中国特色的随机内容生成工具            ，包括音频 
 

 
 

 
 

 
 

 
 

 
 

，视频











，人名                  ，名言 
 
 
 
 
 
 
 
 
 
 
 
，内容

















，段子            ，图片 
 
  
 
  
 
  
 
  
 
  
 
 ，头像











，电话
  
  
  
  
  
  ，邮箱 
  
  
  
  
  
 ，地址 


 


 


 


 


 


，学校
 
 
 
 
 
 ，网址  
   
   
   
   
   
 ，新闻等 

 

 

 

 

 

，方便开发者在布局的时候写页面
 
 
 
 
 
 。 推荐理由 用是真的好用

 

 

 

 

 

 ，但是            ，logo 是真的丑！ 扩展地址 Random Something（中国特色的随机内容生成工具）

Surround（代码片段包裹）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Mehmet Yatkı 功能 把选中的代码用 if

















、try catch            、function 等包裹起来 推荐理由 不会偷懒的程序员 
 

 
 

 
 

 
 

 
 

 
 

，不是好的程序员  
   
   
   
   
   
 。但是偷懒的同时











，也要把代码质量写好 

 

 

 

 

 

。 扩展地址 Surround（代码片段包裹）

Text Toolbox（文本工具箱）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Carlo Cardella 功能 各种文本工具箱                  ，插入日期 
 
  
 
  
 
  
 
  
 
  
 
 、插入 UUID











、编解码等 推荐理由 见过那种小刀没有？就是上面有挖耳朵的
  
  
  
  
  
  、开啤酒的 
  
  
  
  
  
 、锯木头的 
 
 
 
 
 
 
 
 
 
 
 
，五花八门

 

 

 

 

 

 。这个就是这种东西

















，工具集合            ，可以少装一些扩展            。 扩展地址 Text Toolbox（文本工具箱）

Todo Tree（todo 备忘录）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 Gruntfuggly 功能 通过树形菜单显示 TODO 


 


 


 


 


 


、FIXME 等标签 推荐理由 这个地方临时打个 TODO 标记 
 
  
 
  
 
  
 
  
 
  
 
 ，下次再打开这个项目











，就可以在目录树结构中
  
  
  
  
  
  ，方便直观地查看要处理的地方 扩展地址 Todo Tree（todo 备忘录）

tree-extended（目录转文本结构）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 rulyotano 功能 可以生成目录的文本字符串结构 推荐理由 写文章的时候 
  
  
  
  
  
 ，需要展示项目组织结构 


 


 


 


 


 


，用这个就很方便 扩展地址 tree-extended（目录转文本结构）

Turbo Console Log（一键生成 console.log）

推荐指数：⭐⭐⭐⭐⭐

指标 内容 作者 ChakrounAnas 功能 一键生成 console.log 推荐理由 打印文件名
 
 
 
 
 
 、行数  
   
   
   
   
   
 、内容 

 

 

 

 

 

、格式等
 
 
 
 
 
 ，另外注意  
   
   
   
   
   
 ，这个类型的插件特别多 

 

 

 

 

 

，这个从 2018 年更新到 2022 年

 

 

 

 

 

 ，应该是更好的一个 扩展地址 Turbo Console Log（一键生成 console.log）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t9By9CbU-1674499555125)(https://cdn.yuucn.cn/wp-content/uploads/2023/05/1684117898-a9a6b5b5d793e05.gif)]

VS Code Counter（字数统计）

推荐指数：⭐⭐⭐⭐

指标 内容 作者 Kentaro Ushiyama 功能 支持很多语言的代码行数统计 推荐理由 这种插件挺多的            ，选他 
 

 
 

 
 

 
 

 
 

 
 

，主要是从 2018 年至今一直都有更新 扩展地址 VS Code Counter（字数统计）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pzLMNpzY-1674499555126)(https://cdn.yuucn.cn/wp-content/uploads/2023/05/1684117905-a9a6b5b5d793e05.gif)]

WindiCSS IntelliSense（windicss 工具）

推荐指数：⭐⭐⭐⭐

指标 内容 作者 voorjaar 功能 WindiCSS 工具 推荐理由 很多人因为 tailwincss 而重新认识 css











，而 windcss 是一个性能比 tailwindcss 强很多倍                  ，且兼容 tailwind 的下一代原子类工具 扩展地址 WindiCSS IntelliSense（windicss 工具）

unocss（unocss 工具）

推荐指数：⭐⭐⭐⭐

指标 内容 作者 Anthony Fu 功能 unocss 工具 推荐理由 安东尼大师的作品 
 
 
 
 
 
 
 
 
 
 
 
，下下一代 css 原子化工具

















，将会成为 widicss v4 的底层驱动引擎 扩展地址 unocss（unocss 工具）

没有截图            ，反正很强！最好搭配 vite 一起食用 
 

 
 

 
 

 
 

 
 

 
 

。

vscode-pets（在 vscode 里养宠物）

推荐指数：⭐⭐

指标 内容 作者 Anthony Shaw 功能 调节气氛 
 
  
 
  
 
  
 
  
 
  
 
 ，改变心情 推荐理由 没什么卵用











，但是
  
  
  
  
  
  ，能让人眼前一亮 扩展地址 vscode-pets（在 vscode 里养宠物）

未完待续…

本文完成度大概为四分之一 
  
  
  
  
  
 ，还有很多好用的插件由于时间和精力的关系 


 


 


 


 


 


，暂未录入
 
 
 
 
 
 ，敬请期待











。