大家好，我是前端之虎陈随易。
目前是：
- 农村程序员 (自
2021年离职至今都在农村待着) - 独立开发者 (有多个已经在盈利中的产品)
- 自由职业者 (睡到自然醒，困就马上睡)
- 个人创业者 (注册了自己的公司，为产品服务)
- 自驾爱好者 (目前自驾多次，边看风景边敲码)
- 小说写作者 (短篇、长篇作者，有缘就能看到我的作品)
- 开源推进者 (自
2019年持续开源至今)
哈哈，标签很多，但是也确实是我目前的状态，因为我的爱好繁多，喜欢全面探索。
欢迎跟我交朋友(微信)：c91374286
我的个人网站：陈随易的个人网站 https://chensuiyi.com
让我们一起积极向上，为自己而努力奋斗！
往期文章
- 前端之虎陈随易 - 2024年1-2月折腾之路
- 前端之虎陈随易 2023 年终回顾与总结
- 农村程序员&独立开发者，在村里各处写代码的日常与一路走来的历程
- 全职独立开发者陈随易 2023 年 6-7 月总结分享
- 前端之虎陈随易-5年接单经验分享
正文开始
文章简介
本文介绍最新、最实用、最强大的 vscode 精选扩展。好用的扩展，犹如神兵利器，帮助程序员在代码的世界中，所向披靡，战无不胜！
写作背景
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） |
截图
VS Code Counter（字数统计）
推荐指数：⭐⭐⭐⭐
| 指标 | 内容 |
|---|---|
| 作者 | Kentaro Ushiyama |
| 功能 | 支持很多语言的代码行数统计 |
| 推荐理由 | 这种插件挺多的，选他，主要是从 2018 年至今一直都有更新 |
| 扩展地址 | VS Code Counter（字数统计） |
截图
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 里养宠物） |
截图
未完待续...
本文完成度大概为四分之一，还有很多好用的插件由于时间和精力的关系，暂未录入，敬请期待。
