Vs Code 插件推荐

1,106 阅读6分钟

如果你知道 VSCode,一说起它,你可能第一个想到的就是把它当做一个代码编辑器,而它的界面应该可能大概率是这样的: image.png 如果你恰好又是个程序员,那你可能经常会用到它,不管是 Python、JS 还是 C++ 等各种语言对应的文件,都可以用它来进行简单的编辑和整理,甚至是运行和 debug......

一、工作、学习、技术类实用性插件

1、Open In Browser

允许在默认浏览器或应用程序中打开当前文件。 image.png

2、Markdown All in One

VSCode 支持编辑 Markdown,也就是 .md 格式的文件,实现简单的文编编辑。并且可以配合一个的插件,实现绝大多数的 Markdown 编辑器功能。这是一款专门针对 VSCode 开发的插件,安装后可以在 VSCode 上更丰富和完善的编辑 Markdown 文档,非常实用。 image.png

3、Debugger for Chrome

顾名思义:在Chrome浏览器或任何其他支持Chrome调试器协议的目标中调试JavaScript代码。

image.png

4、Bracket Pair Colorizer

一个可定制的扩展,用于为匹配的括号着色。

image.png 效果如下:区别括号的颜色。

image.png

5、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

这个就不用多说了吧,简体中文,改变vs code 编辑器的语言

image.png

6、CSS Peek

允许查看css ID和类字符串作为从html文件到相应css的定义。允许查看和转到定义。

该扩展支持符号定义跟踪的所有正常功能,但不支持css选择器(类、ID和HTML标记)。这包括:

  • Peek:内联加载css文件并在那里快速编辑。(Ctrl+Shift+F12)
  • 转到:直接跳转到css文件或在新编辑器中打开它(F12)
  • 悬停:将鼠标悬停在符号上显示定义(Ctrl+Hover)
  • 此外,它还支持符号提供程序,因此如果您已经知道类或ID名称,则可以快速跳转到正确的CSS/SCSS/LESS代码 image.png

7、Tabnine

Tabnine是一种人工智能代码完成工具,受到数百万开发人员的信任,它可以更快地编写代码,减少错误。无论您是新开发人员还是经验丰富的专业人员,无论是单独工作还是团队成员,Tabnine都将帮助您在缩短QA时间的同时将生产力提升到新的高度–所有这些都在您喜爱的IDE中。

image.png

8、Vetur

使Vue语法高亮, 代码片段(emmet给我的感觉是一个写好了的snippet), 质量提示&错误、格式化/风格、智能提示等

image.png

9、Better Comments

通过此扩展,您将能够将注释分类为:警报、询问、待办事项、集锦,更好的注释扩展将帮助您在代码中创建更人性化的注释

注释掉的代码也可以设置样式,以明确代码不应该存在,可以在设置中指定您想要的任何其他注释样式

image.png

10、prettier

格式化美化代码(ctrl+s保存之后,代码就开源整整齐齐)

image.png

11、Guides

缩进线,(类似于Bracket Pair Colorizer是颜色区分括号)Guides是颜色区分缩进线

image.png

12、vscode-icons | Material Icon Theme

  • vscode-icons
    文件图标集,支持更多文件类型,最重要的,颜值更高!

image.png

  • Material Icon Theme
    文件图标集,支持更多文件类型,最重要的,颜值更高! image.png

13、Power Mode

酷炫的打字插件,可以将你在编辑器中打字的动画显示成多种特效,还挺带感的...

image.png

14、Quokka

Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。另外,在使用 JSXTypeScript 项目中,它能够开箱即用。 image.png

15、CSS Peek

使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to DefinitionPeek definition ”选项,它便会给你发送样式设置的 CSS 代码。

image.png

16、HTML Boilerplate

通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。

image.png

二、娱乐、摸鱼类

1、BBBug

在线听歌聊天摸鱼开源插件(我和朋友设计开发的一款插件),目前发布了两个版本(出自于两个作者,功能一样 操作略微不同而已),一个集音乐/聊天等一体的在线聊天室,支持多房间和创建私人房间,支持房间加密和切换房间模式。
image.png

2、韭菜盒子

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

image.png

  • 基金实时涨跌,实时数据,支持海外基展示
  • 股票实时涨跌,支持 A 股、港股、美股
  • 底部状态栏信息
  • 开市自动刷新,节假日关闭轮询
  • 支持升序/降序排序、基金持仓金额升序/降序
  • 基金实时走势图和历史走势图
  • 基金排行榜
  • 基金持仓信息
  • 股市资金流向(沪深港通资金流向、北向资金、南向资金)
  • 支持 GUI 操作新增&删除 基金 和 股票
  • 通过 GUI 添加基金和股票时,支持模糊搜索匹配
  • 支持 GUI 设置涨跌颜色、状态栏股票自定义等
  • 雪球用户动态关注(雪球新闻)
  • 自定义涨跌图标(吃面、吃肉、烤韭菜、烤肉、喝酒)
  • 基金持仓金额设置(用于动态计算盈亏)
  • 基金盈亏展示(根据实时基金涨跌情况动态实时计算盈亏)
  • 支持维护持仓成本价,自动计算收益率
  • 基金趋势统计图
  • 股票支持分组展示(A 股、港股、美股)
  • 股票涨跌提醒设置
  • 状态栏、侧栏支持自定义模板格式
  • OUTPUT 面板支持选股宝异动快讯,金十资讯
  • 数据中心>牛熊风向标数据统计
  • 欢迎 PR Github 源码

3、windows opacity

主要就是使得vscode变得透明,使得可以一边看代码,一边看视频,上班划水,绝对利器! image.png

4、daily anime

daily anime可以实现追番表的功能,还自带了获取Hitokoto一言的爬虫,纯属好玩

image.png image.png

5、z-reader

z-reader 是一款小说插件,支持阅读本地的 txt 和 epub 文件,同时还支持在线阅读,数据来源是起点和笔趣阁。

在功能方面,该插件支持侧边栏的章节目录显示,支持修改配置文件来设置阅读样式如字体、字号、页边距、背景颜色等,还支持状态栏进度显示、阅读进度保存、文字编码修改、分标签预览等。 image.png

6、Bangumi Open

也是一款追番插件,不过是配合 bilibili 食用的,可以按照分类和年月来查看 B 站上面对应的番剧更新时间和连载情况。

image.png

7、Zhihu On VSCode

知乎的 VSCode 插件,支持知乎和微信扫码登录,可以加在个人推荐内容,可以看到知乎热榜和个人收藏。

image.png

8、** 鼓励师

这个自己根据个人喜好安装使用吧。

9、Go Home

下班提醒小助手,一个简单实用的插件,打工人坚决反内卷!!!

image.png