文章简介

本文介绍最新
  
  
  
  
  
  
  、最实用 
  
  
  
  
  
  
、最强大的 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 里养宠物）

未完待续…

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


 


 


 


 


 


 

，暂未录入
 
 
 
 
 
 
 ，敬请期待













。