2023最新最全vscode插件精选

news2024/11/17 19:50:39

文章简介

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

作者介绍

随易出品，必属精品，只写有深度，有质量的干货文章！

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

  • 自由职业者（现居农村）
  • 独立开发者（正在运营和开发自己的效率工具）
  • 理想主义者（重构狂人，每个代码都必须有灵魂）
  • 偏执狂与强迫症（啊啊啊啊啊）
  • 网文小说作者（2015 年太监，2023 年重新开始写小说）
  • 开源轮子大师（自 2019 年以来，创建数十个持续更新维护的开源项目）
  • web3 学习者（下一代互联网，魅力无限）
  • 代码雕刻工匠（写代码犹如雕刻一个作品，方寸与毫厘之间，方成正宗）

社交联系

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

写作理念

请注意，本文并没有完结。

那么，为什么没有写完的文章就发出来了呢？因为，笔者的写作理念认为，一篇高质量的好文，不是一次就写成的。随着时间和经验的积累，文章应该不定期修改调整，完善更新，不断打磨，以至最佳。所以，需要查看本文最新内容，请关注或联系笔者，以获得最新的优质内容。但是，数十个文章平台和技术社区的文章更新维护，需要的时间、精力都是非常大的，并且笔者为自由职业，没有固定收入，部分高质量文章将会进行收费，请各位读者们，跟随自己的意愿，查看需要付费的文章。

版权信息

  • 本作者所有文章，皆为原创，未具体说明为 可转载 类型，请勿转载，侵权必究。
  • 本文转载类型：可随意转载，保留原文出处即可。

是否付费

否

其他说明

  • 意见反馈、插件推荐等，请联系笔者
  • 推荐指数仅为笔者个人认为的有用程度，不代表插件本身质量和作用

写作背景

vscode 基本是笔者目前唯一使用的编辑器，真香定律在这个编辑器上，体现得淋漓尽致。

为了最大化得发挥出 vscode 真正的实力，在笔者十级强迫症的驱使下，花费半天时间，把所有 vscode 扩展下载量大于 1000 的插件，全部浏览并过滤了一遍，将自认为强大好用的插件，甄选出来，分享给有缘人。

文章正文

注意：以下资料，截止至本文发布日期

GitLens（git 操作插件）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者GitKraken
功能git 需要的一切，它都有
推荐理由git 是现代软件协作的基石，其重要性不言而喻，本插件，更是将 vscode 中的 git 操作无限增强！
扩展地址GitLens（git 操作插件）

GitLens（git 操作插件）

Eva Theme（vscode 主题）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者fisheva
功能调整和优化 vscode 配色
推荐理由其他 vscode 颜色主题还有不少，但我独爱它，不信，你试试。
扩展地址Eva Theme（vscode 主题）

Eva Theme（vscode主题）

Markdown All in One（markdown 操作增强）

推荐指数：⭐⭐⭐⭐⭐

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

Markdown All in One（markdown操作增强）

Markdown Preview Enhanced（markdown 预览增强）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者Yiyi Wang
功能markdown 预览增强
推荐理由切换 markdown 预览主题 ，导出为 pdf、html 等格式文件，鼠标上传图片等
扩展地址Markdown Preview Enhanced（markdown 预览增强）

Markdown Preview Enhanced（markdown预览增强）

Markdown Image（markdown 图片上传）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者Hancel.Lin
功能从粘贴板一键粘贴图片到本地目录、七牛云存储、SM.MS 等
推荐理由手动创建目录，设置图片名称，填写 markdown 图片路径的方式太原始了！是程序员就用这个！
扩展地址Markdown Image（markdown 图片上传）

如下截图中的图片地址，就是通过这个插件自动生成的

Markdown Image（markdown图片上传）

Paste from Web（markdown 图片下载）

推荐指数：⭐⭐⭐

指标内容
作者BishopCodes
功能将在线图片地址，下载到本地目录中
推荐理由解决了 markdown 图片的下载问题，唯一不足之处就是，自定义下载目录功能不够强大。不过，关注我，我会出手
扩展地址 Paste from Web（markdown 图片下载）

Paste from Web（将在线地址的图片下载到本地）

Markdown Paste（markdown 图片下载）

推荐指数：⭐⭐⭐

指标内容
作者telesoho
功能一键下载 markdown 文件中的所有在线图片到本地
推荐理由解决了 markdown 多图下载问题，唯一不足之处就是，自定义下载目录功能不够强大。不过，关注我，我会出手
扩展地址Markdown Paste（markdown 图片下载）

Markdown Paste（markdown 图片下载）

Image preview（图片预览）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者Kiss Tamás
功能在编辑器左侧代码行数左边，预览该行的图片路径
推荐理由有些小图片、小图标在左侧预览查看，可以一目了然图片是否正确
扩展地址Image preview（图片预览）

Image preview（图片预览）

filesize（文件大小）

推荐指数：⭐⭐⭐

指标内容
作者Matheus Kautzmann
功能在编辑器底部状态栏显示当前文件的大小
推荐理由当需要看文件大小的时候，还是很有用的，不过不是必备插件，三颗星
扩展地址filesize（文件大小）

filesize（文件大小）

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

推荐指数：⭐⭐⭐⭐⭐

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

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

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

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者mhutchie
功能纠结怎么取变量? 中文一键翻译转换成常用大小驼峰等格式
推荐理由想变量名太难了！想英文变量名，更难！用这个就对了！
扩展地址驼峰翻译助手（变量名翻译）

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

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

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者lihuiwang
功能别名路径跳转插件，支持任何项目，可以自由配置映射规则，自由配置可缺省后缀名列表
推荐理由导入的方法、函数、组件，需要查看他们的代码实现，用此插件，可以方便地根据项目具体架构进行自定义跳转设置
扩展地址别名路径跳转（代码路径跳转）

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

Bookmarks（书签）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者Alessandro Fragnani
功能给当前行打个书签，然后，跳到这来
推荐理由有时候写个功能，需要在当前页面不同的位置进行操作，打几个标记互相跳转，可以减少鼠标滚动的低效操作
扩展地址Bookmarks（书签）

Bookmarks（书签）

Browse Lite（vscode 中的浏览器）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者Anthony Fu
功能在 vscode 里面，浏览页面和项目
推荐理由简单、轻量、方便，还可以调试，安东尼出品，也属精品
扩展地址Browse Lite（vscode 中的浏览器）

vscode中的浏览器

Change Case（修改变量名风格）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者hjdarnel
功能一键调整变量名风格
推荐理由这类插件特别多！目前我用这个，因为它比其他的要新，瑕疵呢就是，不支持鼠标右键操作，放心，我会出手
扩展地址Change Case（修改变量名风格）

Change Case（修改变量名风格）

Comment Divider（分割线注释）

推荐指数：⭐⭐⭐

指标内容
作者stackbreak
功能一键生成分隔线注释
推荐理由还在手动画分隔线？程序员，不要做这种傻事！来吧，看看这个。
扩展地址Comment Divider（分割线注释）
Comment Divider（分割线注释）](https://static.yicode.tech/images/202301/20230123121037.png)

DotENV（环境变量语法高亮）

推荐指数：⭐⭐⭐

指标内容
作者mikestead
功能为 dotenv 文件提供语法高亮
推荐理由怎么说呢，可有可无，但是，就像那句话，有比没有好。
扩展地址DotENV（环境变量语法高亮）

DotENV（环境变量语法高亮）

i18n Ally（多语言操作）

推荐指数：⭐⭐⭐⭐

指标内容
作者Lokalise
功能i18n 多语言操作增强
推荐理由怎么说呢，可有可无，但是，就像那句话，有比没有好。
扩展地址i18n Ally（多语言操作）

i18n Ally（多语言操作）

Inline fold（css 类名聚合）

推荐指数：⭐⭐⭐⭐⭐

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

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 Sass Compiler（scss/sass 自动编译）

Live Server（本地静态服务器）

推荐指数：⭐⭐⭐⭐⭐

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

Live Server（本地静态服务器）

Prettier（代码宽松格式化）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者Prettier
功能代码格式化
推荐理由使用比较宽松的规则格式化代码，跟 js 的自由随心很搭哦。
扩展地址Prettier（代码宽松格式化）

Prettier（代码宽松格式化）

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

推荐指数：⭐⭐⭐⭐

指标内容
作者Prettier
功能中国特色的随机内容生成工具，包括音频，视频，人名，名言，内容，段子，图片，头像，电话，邮箱，地址，学校，网址，新闻等，方便开发者在布局的时候写页面。
推荐理由用是真的好用，但是，logo 是真的丑！
扩展地址Random Something（中国特色的随机内容生成工具）

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

Surround（代码片段包裹）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者Mehmet Yatkı
功能把选中的代码用 if、try catch、function 等包裹起来
推荐理由不会偷懒的程序员，不是好的程序员。但是偷懒的同时，也要把代码质量写好。
扩展地址Surround（代码片段包裹）

Surround（代码片段包裹）

Text Toolbox（文本工具箱）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者Carlo Cardella
功能各种文本工具箱，插入日期、插入 UUID、编解码等
推荐理由见过那种小刀没有？就是上面有挖耳朵的、开啤酒的、锯木头的，五花八门。这个就是这种东西，工具集合，可以少装一些扩展。
扩展地址Text Toolbox（文本工具箱）

Text Toolbox（文本工具箱）

Todo Tree（todo 备忘录）

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者Gruntfuggly
功能通过树形菜单显示 TODO、FIXME 等标签
推荐理由这个地方临时打个 TODO 标记，下次再打开这个项目，就可以在目录树结构中，方便直观地查看要处理的地方
扩展地址Todo Tree（todo 备忘录）

Todo Tree（todo 备忘录）

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

推荐指数：⭐⭐⭐⭐⭐

指标内容
作者rulyotano
功能可以生成目录的文本字符串结构
推荐理由写文章的时候，需要展示项目组织结构，用这个就很方便
扩展地址tree-extended（目录转文本结构）

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 工具）

WindiCSS IntelliSense（windicss 工具）

unocss（unocss 工具）

推荐指数：⭐⭐⭐⭐

指标内容
作者Anthony Fu
功能unocss 工具
推荐理由安东尼大师的作品，下下一代 css 原子化工具，将会成为 widicss v4 的底层驱动引擎
扩展地址unocss（unocss 工具）

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

vscode-pets（在 vscode 里养宠物）

推荐指数：⭐⭐

指标内容
作者Anthony Shaw
功能调节气氛，改变心情
推荐理由没什么卵用，但是，能让人眼前一亮
扩展地址vscode-pets（在 vscode 里养宠物）

vscode-pets（在 vscode 里养宠物）

未完待续…

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409755.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue 路由钩子

vue 路由钩子

路由钩子分为三种 全局钩子： beforeEach、 afterEach、beforeResolve单个路由里面的钩子： beforeEnter组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 它的三个参数： to: (Route路由对象) 即将要进入的目标…
阅读更多...
【前端知识体系梳理（三）】Diff策略

【前端知识体系梳理（三）】Diff策略

​ 目录 🍉前言 🍉传统Diff算法 🍉React Diff 🍓🍓🍓1、tree diff 🍓🍓🍓2、component diff 🍓🍓🍓3、element diff &#x1…
阅读更多...
前端页面项目——博客系统

前端页面项目——博客系统

目录 1.实现博客列表页 1.1 实现导航栏 1.2 实现中间版心 1.3 实现个人信息 1.4 实现博客列表 2. 实现博客正文页 3. 实现博客登陆页 4. 实现博客编辑 4.1 实现编辑区 4.2 引入编辑器 展示 1）登录页面 2）博客列表页 3）博客详情页 4&am…
阅读更多...
【JavaScript】手撕前端面试题：手写Object.create | 手写Function.call | 手写Function.bind

【JavaScript】手撕前端面试题：手写Object.create | 手写Function.call | 手写Function.bind

🖥️ NodeJS专栏：Node.js从入门到精通 🖥️ 博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长的万字自述） 🖥️ TypeScript知识总结&…
阅读更多...
PyQt5之进度条：QProgressBar

PyQt5之进度条：QProgressBar

PyQt5之进度条：QProgressBar 在软件中，在处理特别冗长的任务时，如果没有相关的进度信息，这个等待的过程会比较考验用户的耐心，根据相关理论，进度条可以缓解用户在等待过程中的焦虑，所以&#x…
阅读更多...
前端学习笔记（14）-Vue3组件传参

前端学习笔记（14）-Vue3组件传参

1.props&#xff08;父组件传递给子组件&#xff09;1.1 实现如果你没有使用 <script setup>&#xff0c;props 必须以 props 选项的方式声明&#xff0c;props 对象会作为 setup() 函数的第一个参数被传入&#xff1a;在子组件中&#xff1a;export default {props: {ti…
阅读更多...
微信小程序头像昵称填写能力

微信小程序头像昵称填写能力

1、基本介绍 微信小程序获取头像昵称的能力&#xff0c;最近又进行了一次调整&#xff0c;如果没有记错这是今年第三次调整了&#xff0c;每次调整每个开发者心中我相信都跟我一样&#xff0c;万马奔腾。。。今天写个demo体验下实际效果如何。 详细信息请见小程序用户头像昵称…
阅读更多...
微信小程序实现PDF预览功能——pdf.js(含源码解析）

微信小程序实现PDF预览功能——pdf.js(含源码解析）

文章目录前言一、pdf.js 是什么&#xff1f;二、使用步骤1.下载库文件2.使用方式微信小程序端——使用 web-view 标签H5 端——使用 iframe 标签&#xff08;使用vue框架&#xff09;3.更改源码如何隐藏顶部工具栏如何让用户强制阅读一定时间如何获取pdf总页数如何获取pdf当前页…
阅读更多...
【折腾电脑】Edge浏览器看B站视频卡顿最全解决办法合集

【折腾电脑】Edge浏览器看B站视频卡顿最全解决办法合集

开头碎碎念&#xff1a;更新频率明显和疫情呈正相关&#xff0c;祝大家健健康康吃好喝好&#xff01; 使用Microsoft Edge浏览器观看B站视频&#xff0c;卡得无法忍受。 在网络上搜索相关问题&#xff0c;最早的一条是2016/04/17微软问题反馈的记录。任何原因的卡顿都是正常的&…
阅读更多...
Vue样式穿透

Vue样式穿透

Vue样式穿透 vue文件的style标签的scoped属性作用&#xff1a;PostCSS在元素标签上添加特殊属性值&#xff0c;在样式的选择器后面添加属性选择器&#xff0c;实现了组件样式的私有化&#xff0c;防止组件之间的样式污染&#xff08;比如相同类名的元素&#xff09;。 但在使…
阅读更多...
【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )

【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )

文章目录一、内边距复合写法1、语法2、代码示例 - 设置 1 个值3、代码示例 - 设置 2 个值4、代码示例 - 设置 3 个值5、代码示例 - 设置 4 个值一、内边距复合写法 1、语法 盒子模型内边距 可以通过 padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-…
阅读更多...
前端开发服务器中的 Proxy 代理跨域实现原理解读

前端开发服务器中的 Proxy 代理跨域实现原理解读

各位朋友你们好&#xff0c;我是桃小瑞&#xff0c;微信公众 桃小瑞。在这给大家拜个晚年&#xff0c;祝各位朋友新年快乐。 前言 在前端的开发过程中&#xff0c;尤其是在浏览器环境下&#xff0c;跨域是个绕不开的话题&#xff0c;相信每个前端都会涉及到这个问题&#xf…
阅读更多...
“write javaBean error, fastjson version 1.2.83, class org.apache.shiro.web.servlet.ShiroHttpServletR

“write javaBean error, fastjson version 1.2.83, class org.apache.shiro.web.servlet.ShiroHttpServletR

1. 相关技术 springboot 2.6.3mybatis-spring-boot-starter 2.2.2mybatis 3.5.10fastjson 1.2.83hutool-all 5.7.22shiro-spring 1.8.0 2. 报错信息 "write javaBean error, fastjson version 1.2.83, class org.apache.shiro.web.servlet.ShiroHttpServletRequest, meth…
阅读更多...
＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞.

＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-alive＞.

百度翻译&#xff1a; &#xff1c;router view&#xff1e;不能直接在&#xff1c;transition&#xff1e;或&#xff1c;keep alive&#xff1e;中使用。 改用插槽道具&#xff1a; 运行环境&#xff1a; "vue": "^3.2.8", "vue-router": &quo…
阅读更多...
idea的vue文件中使用ElementUi组件

idea的vue文件中使用ElementUi组件

作为计算机专业的学生&#xff0c;在做实训项目时很惆怅前端页面的搭建&#xff0c;这个时候就突出到了组件的好处&#xff1b; 这篇就是给大家展示使用ElementUi组件&#xff01;&#xff01;&#xff01; 内容上分为vue3和之前的版本&#xff0c;自行选择&#xff01;&#x…
阅读更多...
33.JavaScript映射与集合（Map、Set）数据类型基础知识介绍与使用

33.JavaScript映射与集合（Map、Set）数据类型基础知识介绍与使用

文章目录映射与集合&#xff08;Map、Set&#xff09;映射&#xff08;Map&#xff09;Map常用的方法不要使用map[key]访问属性对象作为Map的键Map的遍历与迭代默认的迭代方式forEach()从数组、对象创建Map从数组、Map创建对象集合&#xff08;Set&#xff09;集合迭代总结映射…
阅读更多...
Vuex 之一：3种拿到 state 中数据的方式与实例剖析

Vuex 之一：3种拿到 state 中数据的方式与实例剖析

Ⅰ、Vuex 简介&#xff1a; 1、Vuex 是什么&#xff1f; 答&#xff1a;Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式&#xff1b; 而所谓状态就是指&#xff1a;组件中所维护的数据); (简而言之&#xff1a;就是状态管理&#xff0c;解决复杂组件数据通信&#xff0c…
阅读更多...
React中实现keepalive组件缓存效果

React中实现keepalive组件缓存效果

背景&#xff1a;由于react官方并没有提供缓存组件相关的api&#xff08;类似vue中的keepalive&#xff09;&#xff0c;在某些场景&#xff0c;会使得页面交互性变的很差&#xff0c;比如在有搜索条件的表格页面&#xff0c;点击某一条数据跳转到详情页面&#xff0c;再返回表…
阅读更多...
处理vue中的长按事件、点击事件、默认事件冲突

处理vue中的长按事件、点击事件、默认事件冲突

写在前面 示例是h5项目。技术栈&#xff1a;vue vant nuxt。 知识点简介&#xff1a; touchstart: // 手指放到屏幕上时触发 touchend: // 手指离开屏幕时触发 touchmove: // 手指在屏幕上滑动式触发 touchcancel: // 系统取消touch事件的时候触发 页面及需求&#xff1a; …
阅读更多...
一文教会你何为重绘、回流？

一文教会你何为重绘、回流？

文章目录css图层图层创建的条件重绘(Repaint)回流触发重绘的属性触发回流的属性常见的触发回流的操作优化方案requestAnimationFrame----请求动画帧写在最后学习目标&#xff1a; 了解前端Dom代码、css样式、js逻辑代码到浏览器展现过程了解什么是图层了解重绘与回流了解前端层…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023