VScode 常用插件推荐,非常全面

文章目录

      • 一、主题美化
        • Peacock
        • Material Theme
        • Material Theme Icons
        • background
        • Power Mode
        • Rainbow CSV
        • Indent Rainbow
        • Polacode
      • 二、检查格式化
        • ESLint
        • Prettier - Code formatter
        • Prettier ESLint
        • Stylelint
      • 三、编程美化
        • Document This
        • Better Comments
        • Rainbow Brackets
      • 四、集成插件
        • Docker
        • PostCode
        • REST Client
        • Live Server
        • Code Runner
        • Tabnine
        • GitLens
        • Git History
        • Remote Development
      • 五、开发效率
        • Vetur/volar
        • Codelf
        • WXML - Language Service
        • XML Tools
        • Auto Rename Tag
        • json2ts
        • px to rem & rpx (cssrem)
        • CSS Peek
        • IntelliSense for CSS/SCSS/Less
        • Path Intellisense
        • Image preview
        • Trailing Spaces
        • Auto Close Tag
        • HTML CSS Support
        • Bookmarks
        • Error Lens
        • Project Manager
      • 六、数据分析
        • VS Code Counter
        • Import Cost
        • filesize
      • 七、学习一下
        • Code Spell Checker
        • A-super-translate
        • 会了吧
      • 八、摸鱼神器
        • LeetCode
        • fisher
        • 4399 on VSCode
        • VSC Netease Music
        • 韭菜盒子
        • Rainbow Fart
      • 九、其他
        • Partial Diff
        • Chinese
        • Todo Tree
        • Vim
        • Markdown Preview Enhanced
        • Markdown PDF
        • Markdown All in One

一、主题美化

Peacock

可以为 VScode 中的不同项目添加不同的颜色主题,方便区分不同项目。

在这里插入图片描述
效果图:
在这里插入图片描述

Material Theme

为 VScode 提供 Material Design 风格的主题。

在这里插入图片描述

Material Theme Icons

为 VScode 中的文件和文件夹添加 Material Design 风格的图标。

在这里插入图片描述

background

给 Visual Studio Code 添加背景,也可以自定义背景图片。

在这里插入图片描述
效果图:
在这里插入图片描述

Power Mode

炫酷的敲代码插件。

在这里插入图片描述
效果图:
请添加图片描述

Rainbow CSV

对 CSV 文件进行语法高亮,方便查看和编辑。

在这里插入图片描述
效果图:
在这里插入图片描述

Indent Rainbow

为缩进添加彩虹色条带,方便识别缩进层次。

在这里插入图片描述
效果图:
在这里插入图片描述

Polacode

生成漂亮的代码截图的插件。

在这里插入图片描述
效果图:

请添加图片描述

二、检查格式化

ESLint

用于 JavaScript/TypeScript 代码的语法检查和格式化。

在这里插入图片描述

Prettier - Code formatter

代码格式化插件,支持多种语言。

在这里插入图片描述

Prettier ESLint

代码格式化。

在这里插入图片描述

Stylelint

CSS代码检查工具,包括捕捉错误、最佳实践、控制可以使用的语言特性和强制代码风格规范。

在这里插入图片描述
效果图:
在这里插入图片描述

三、编程美化

Document This

主要针对JavaScript 和 TypeScript 语言生成注释。

在这里插入图片描述
效果图:

请添加图片描述

Better Comments

一款美化注释的插件,可以根据不同种类的注释,显示不同的颜色,一目了然,提高注释可读性。

在这里插入图片描述
效果图:
在这里插入图片描述

Rainbow Brackets

在代码中使用彩虹色高亮括号,方便识别括号嵌套层次。

在这里插入图片描述
效果图:
在这里插入图片描述

四、集成插件

Docker

集成 Docker 环境,方便在 VScode 中管理容器和镜像。

Docker

PostCode

在 vscode 里面使用 postman

在这里插入图片描述
效果图:
在这里插入图片描述

REST Client

可直接在 VScode 中发起 HTTP 请求,方便测试和调试 API。

在这里插入图片描述
效果图:
在这里插入图片描述

Live Server

为 HTML、CSS 和 JavaScript 提供实时预览和自动刷新,在浏览器中实时预览静态网页的插件。

在这里插入图片描述
效果图:
请添加图片描述

Code Runner

支持多种编程语言的代码运行器。

在这里插入图片描述

Tabnine

AI 辅助自动补全插件,支持多种语言。

在这里插入图片描述
效果图:
在这里插入图片描述

GitLens

用于集成 Git 功能,提供更多的 Git 信息和可视化操作。

在这里插入图片描述
效果图:

Git History

可以查看 Git 历史记录和提交详细信息。

在这里插入图片描述
效果图:
在这里插入图片描述

Remote Development

远程开发插件,可以在 VScode 中远程连接到远程主机或容器中开发。

在这里插入图片描述
效果图:

五、开发效率

Vetur/volar

vue/vue3语法高亮、智能感知、Emmet等, 包含格式化功能。

在这里插入图片描述

Codelf

变量命名神器
在这里插入图片描述
效果图:
在这里插入图片描述

WXML - Language Service

微信小程序 .wxml 文件代码高亮,标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 code snippets)。

在这里插入图片描述
效果图:
在这里插入图片描述

XML Tools

XML 文件增强插件,提供 XML 文件的语法提示、自动补全、格式化等功能。

在这里插入图片描述

Auto Rename Tag

自动重命名成对的HTML标记,修改开始标签,结束标签会同步修改。

在这里插入图片描述
效果图:
在这里插入图片描述

json2ts

在这里插入图片描述
效果图:
请添加图片描述

px to rem & rpx (cssrem)

自动换算单位的插件。很简单,出现提示以后回车即可。

在这里插入图片描述
效果图:
在这里插入图片描述

CSS Peek

可以通过点击类名迅速定位到样式的定义。但不支持less、stylus的嵌套

在这里插入图片描述
效果图:
在这里插入图片描述

IntelliSense for CSS/SCSS/Less

提供 CSS、SCSS 和 Less 的语法提示和自动补全。

在这里插入图片描述
效果图:
在这里插入图片描述

Path Intellisense

提供文件路径的自动补全和提示。

在这里插入图片描述
效果图:

Image preview

预览代码中图片的引用,鼠标移上去就会有小窗展示图片。

在这里插入图片描述
效果图:

Trailing Spaces

把尾随空格显示出来。

在这里插入图片描述
效果图:
在这里插入图片描述

Auto Close Tag

自动闭合 HTML/XML 标签的插件,避免输入错误的标签闭合造成的问题。

在这里插入图片描述
效果图:
在这里插入图片描述

HTML CSS Support

在 HTML 文件中提供 CSS 的语法提示和自动补全功能。

在这里插入图片描述

Bookmarks

为代码添加书签,方便在文件中快速跳转。

在这里插入图片描述
效果图:

Error Lens

将编辑器诊断出的警告、错误、语法问题(提示的波浪线)等,以用颜色填充行背景的方式突出提示,并将诊断信息显示在尾部。

在这里插入图片描述
效果图:

Project Manager

项目管理,方便进入任何项目

在这里插入图片描述
效果图:

六、数据分析

VS Code Counter

统计代码总行数、注释行数、空白行数,以及使用的语言。

在这里插入图片描述
效果图:

Import Cost

在导入语句中显示导入模块的大小的插件。

在这里插入图片描述
效果图:

filesize

在状态栏中显示当前文件大小。

在这里插入图片描述
效果图:
在这里插入图片描述

七、学习一下

Code Spell Checker

检查代码中单词拼写是否正确,当单词不正常的时候,就会在下方出现波浪线进行提示,还可以自定义词典,忽略某个单词的检查等。

在这里插入图片描述
效果图:

A-super-translate

划词翻译。鼠标停留选中几秒就会查看翻译内容。

在这里插入图片描述
效果图:

会了吧

打开源码可以自动分析所有包含的英语单词,并显示解释结果,先学单词再看代码

在这里插入图片描述

八、摸鱼神器

LeetCode

在线LeetCode刷题

在这里插入图片描述
效果图:

fisher

独创4种最隐蔽最安全摸鱼方式,其中猥琐模式/安全模式,极为隐蔽,瞒天过海,暗度陈仓。

在这里插入图片描述
效果图:

4399 on VSCode

玩一会 4399 小游戏, 放松身心, 劳逸结合, 更好地开始接下来的工作 。

在这里插入图片描述
效果图:

VSC Netease Music

网易云音乐程序员版,使用 Webview 实现,通过 HTMLAudio​Element 播放音乐,不依赖命令行播放器

在这里插入图片描述
效果图:

韭菜盒子

VSCode 里也可以看股票 & 基金实时数据,做最好用的投资插件。

在这里插入图片描述

效果图:

Rainbow Fart

VSCode Rainbow Fart是一个在你编程时持续夸你写的牛逼的扩展,可以根据代码关键字播放贴近代码意义的真人语音。

在这里插入图片描述

九、其他

Partial Diff

查看哪里修改了代码、查看输出的日志信息有什么区别等等。

在这里插入图片描述

Chinese

为 VS Code 提供本地化中文界面。

Chinese

Todo Tree

可以扫描代码中的注释并生成待办事项列表,方便管理任务。

Todo Tree
效果图:

Vim

为 VScode 添加 Vim 的编辑模式。

Vim

Markdown Preview Enhanced

提供更多的 Markdown 预览和导出选项,预览窗口内置于 vscode 中。

在这里插入图片描述
效果图:

Markdown PDF

MarkdownPDF可将Markdown文件转换为pdf、html、png或jpeg文件

在这里插入图片描述
效果图:
在这里插入图片描述

Markdown All in One

为 Markdown 提供语法高亮、预览、导出等功能。

在这里插入图片描述
效果图:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android 新浪微博客户端的表情功能的实现

这是一篇好文章,我转来收藏,技术的最高境界是分享。 最近在搞android 新浪微博客户端,有一些心得分享弄android客户端表情功能可以用以下思路1.首页把新浪的表情下载到本地一文件夹种,表情图片的命名要用新浪微博表情原来的命名比…

夸克两年SVIP试水

那就这样喽 以后不用了就是🙄 然后还有另外一个目的就是 影视资源可以直接上传,然后就可能不会那么卡 可是现在很多资源网站都有视频直链加密,你点击了云收藏他有很大几率是不会收藏成功的(e.g.这个m3u8链接只有你这个IP才能用&a…

mix2 android 8.0,小米MIX2终于用上安卓8.0,米粉欢呼:MIUI9完美了

原标题:小米MIX2终于用上安卓8.0,米粉欢呼:MIUI9完美了 安卓8.0的系统出来啦!部分小米用户已经可以用上了基于安卓8.0系统的MIUI9 7.12.18体验版,据说速度“快到飞起”! 安卓8.0版本重点是提升了电池续航能…

Android模仿新浪微博(主页微博,评论界面)

主页微博: 获取当前登录用户及其所关注(授权)用户的最新微博接口:http://open.weibo.com/wiki/2/statuses/friends_timeline 代码详解: 1.异步get请求数据,由于数据中带图片,故需要多线程管理…

音视频技术开发周刊 | 291

每周一期,纵览音视频技术领域的干货。 新闻投稿:contributelivevideostack.com。 谷歌将 AI 芯片团队并入云计算部门 追赶微软和亚马逊 OpenAI推出的ChatGPT获得一定成功,微软是OpenAI的重要投资者,它将ChatGPT植入必应搜索&#…

生成式AI年度观察 | 技术及产品快速迭代,生成内容质量及安全性仍需提升

原文链接: https://mp.weixin.qq.com/s/ED9mo5pxuDdyZmrFe-u7qw 一、2022年生成式AI发展观察 1.扩散模型和ChatGPT能力出众,多种生成模态涌现 扩散模型Diffusion(以下简称“扩散模型”)和神经网络模型CLIP结合,文生图实…

可信AI年度观察 | 生成式AI技术及产品快速迭代,生成内容质量及安全性仍需提升

自2021年起,生成式人工智能(以下简称“生成式AI”)连续两年入选Gartner《Hype Cycle for Artificial Intelligence》,被认为是未来重要的AI技术趋势。2022年以来,生成式AI产品不断涌现,生成内容模态多样&am…

孙燕姿谈“AI孙燕姿”:她的反应让人意外,深入体验揭示其背后的真相与潜力!

目录 前言AI歌手简介AI歌手的技术原理孙燕姿对“AI孙燕姿”的看法结论个人感受一、你听过AI歌手的音乐呈现吗?作为听众你的感受如何?二、你认为这种新型演艺模式能否获得广泛的市场认可?原因是什么?三、你认为AI歌手会取代流行歌手…

吞噬还是撬动?开发者如何应对大模型风暴?

责编 | 禾木木 出品 | CSDN(ID:CSDNnews) ChatGPT 的出现几乎改变了 AI 的风向,各方大佬都丝毫不吝惜溢美之词,比尔盖茨说这种人工智能技术出现的重大意义,不亚于互联网和个人电脑的诞生;英伟达…

《花雕学AI》ChatGPT跟人类的思考方式有什么不同?

一、ChatGPT是一个基于GPT-3.5的对话语言模型,它可以根据用户的输入生成多轮对话,也可以生成文本、代码、音乐等内容。ChatGPT的思考方式是利用大量的数据和强大的算力来学习语言的联合概率分布,从而能够根据上下文和目标生成合理和有趣的回复…

跟着ChatGPT学PsychoPy编程1:绘制一个随按键而变化的进度条

让GPT帮忙绘制一个随按键而发生的进度条(说的越详细越好): from psychopy import visual, event, core # 创建窗口 win visual.Window(size(800, 600), fullscrTrue) #True表示全屏 # 创建矩形框 rect visual.Rect(win, width0.1, height0.…

抖音服务器带宽有多大,才能供上亿人同时刷?

字节跳动有多少台服务器?字节跳动大型的数据中心出口带宽是多少? 最近看到一个有意思的提问:抖音服务器带宽有多大,为什么能够供那么多人同时刷?今天来给大家科普一下。 图片来自 Pexels 抖音,百度&#xf…

月报总结|Moonbeam 5月份大事一览

本月,Moonbeam迎来了Uniswap V3的部署,经过一年的社区讨论,UniSwap V3终于以5000万个同意票通过,将在未来一个月内部署于Moonbeam,为Web3用户提供更广泛公链生态的多链体验,加速应用之间跨链交互&#xff0…

月报总结|Moonbeam 4月份大事一览

本月,Moonbeam生态扶持进入下一里程碑!探索更多优质的早期Web3项目,Moonbeam Accelerator Program已公布进入最终加速孵化阶段的10家初创公司,这些幸运项目将在未来3个月接受顶级孵化公司和专业投资机构的培训,于下半年…

惊人的算力成本背后,自动驾驶公司如何加速研发创新

【摘要】AI算法模型的开发,测试和训练是自动驾驶公司最重要的工作之一,它们都需要大量GPU算力来支撑。然而,“一人一卡”的简单独占式GPU分配方式会导致GPU分配率高但实际利用率低,造成大量算力的浪费。基于远程GPU的GPU池化技术能…

Flutter 中使用 OpenAI GPT-3 进行语义化处理

Flutter 中使用 OpenAI GPT-3 进行语义化处理 视频 https://www.bilibili.com/video/BV1AA411X7o3/ 前言 最近 openai 的 ChatGPT 火了,然后我也想着用它来做点什么,于是就写了个 调用 openai api 语言执行工具,跑个测试,以后再有…

谷歌云|机密 GKE 节点可在计算优化的 C2D 虚拟机上使用

机密 GKE 节点可用于计算优化的 C2D 虚拟机。 许多公司已采用 Google Kubernetes Engine (GKE) 作为其应用程序基础架构中的关键组件。在某些情况下,使用容器和 Kubernetes 的优势可以超越传统架构,但迁移到云端并在云端运行应用程序通常需要战略规划以降…

【打卡-Coggle竞赛学习2023年3月】对话意图识别

学习链接: https://coggle.club/blog/30days-of-ml-202303 ## Part1 内容介绍 本月竞赛学习将以对话意图识别展开,意图识别是指分析用户的核心需求,错误的识别几乎可以确定找不到能满足用户需求的内容,导致产生非常差的用户体验…

魔法咒语

魔法咒语 题目描述 Chandra 是一个魔法天才。从一岁时接受火之教会洗礼之后, Chandra 就显示出对火元素无与伦比的亲和力,轻而易举地学会种种晦涩难解的法术。这也多亏 Chandra 有着常人难以企及的语言天赋,让她能轻松流利地说出咒语中那些极…

网络舆情监测系统TOOM

在当今社会网络信息纷繁错杂,一条小小的舆情信息很可能引发异常舆情风暴,导致严重的舆情危机,而网络舆情监测系统能,更好地全面监测网络信息,未雨绸缪,精准把控,及时发现及时处理,为…