文章简介

本文介绍最新、最实用、最强大的 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://static.yicode.tech/images/202301/20230123230646.gif)]

VS Code Counter（字数统计）

指标	内容
作者	Kentaro Ushiyama
功能	支持很多语言的代码行数统计
推荐理由	这种插件挺多的，选他，主要是从 2018 年至今一直都有更新
扩展地址	VS Code Counter（字数统计）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pzLMNpzY-1674499555126)(https://static.yicode.tech/images/202301/20230123231307.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 里养宠物）

未完待续…

本文完成度大概为四分之一，还有很多好用的插件由于时间和精力的关系，暂未录入，敬请期待。

2023最新最全vscode插件精选相关推荐

2023年最新最全 VSCode 插件推荐
Visual Studio Code 是由微软开发的一款免费的.针对于编写现代Web和云应用的跨平台源代码编辑器.它包含了一个丰富的插件市场,提供了很多实用的插件.下面就来分享 2023 年前端必备的 ...
华为OD机试2023 最新最全备考攻略助你轻松上岸
[华为OD机试真题 2022&2023]真题目录 @点这里@ [华为OD机试真题]信号发射和接收 &试读& @点这里@ [华为OD机试真题]租车骑绿道 &试读& ...
2023最新最全git安装教程，保姆级手把手式安装！！！
目录一.git简介二.安装过程 1.首先进入git的官网:https://git-scm.com/然后选择Downloads. 2.接着选择与自己电脑系统对应的下载选项,我的电脑是 ...
2023最新Web前端面试题精选大全及答案（一）
1.Opacity和grba的区别是 opacity 会继承父元素的 opacity 属性,而 rgba 设置元素的后代元素不会继承不透明属性 2.Display:none和visibilty区别 ...
VSCode 插件大全
VSCode 插件大全相关参考 [功能类] Chinese 简体中文 Polacode 代码截图 file-size Git History (!) Live Server open in brow ...
精选！必备的VSCode插件
精选!必备的 VSCode 插件 1.Chinese Language 简体中文汉化插件,和我一样英文不好的童鞋可以安装这个插件进行汉化.这个插件重载之后还没有汉化成功的话,把编辑器关闭重新打开就行了 ...
最新最全vuepress零基础搭建(github搭建+新增插件)
最新最全vuepress零基础搭建标注:最终版以及修改最终都在www.javanode.cn是最终版本,在学习中需要修改的内容以及笔记全在这个网站,谢谢!有任何不妥的地方望纠正看完了,发现对你有用 ...
【工具】1063- 前端40+精选VSCode插件，总有几个你未拥有！
有句话,事半功倍,其必然是借助了某些思想和工具. VSCode是我们前端开发的武器,本文40+精选插件,让其更加锋利,无坚不摧!! 必备的下面这些必备的我就不说了代码段 JavaScript \( ...
PS 2021最新最全插件滤镜大全一键安装版下载 Photoshop插件合集WIN一键安装版支持PS 2021
PS 2021最新最全插件滤镜大全一键安装版下载 Photoshop插件合集WIN一键安装版支持PS 2021 原文及下载地址:https://www.aeziyuan.com/t-19256.ht ...

2023最新最全vscode插件精选