5款冷门却超级好用的VS Code插件

简介: VS Code的口碑越来越好,受欢迎度也越来越高,以我为例,有时一个项目中可能会用到C++、Java、JS等不同编程语言,如果针对每一种语言都去安装一款对应的IDE,那样不仅会浪费很多时间,而且会极大的拖慢电脑速度。而VS Code通过简单的配置,就可以让它与对应语言当下最为流行的IDE相提并论,因此,就没必要再去安装PyCharm、IDEA、Clion、Webstorm这些了。

20.jpgVS Code之所以如此受欢迎,离不开它强大的社区,这让VS Code有丰富而实用的插件。而且,通过一些插件的配合,它就可以完成那些专业IDE所能完成的大多数工作。

今天,就给大家带来5款提升效率、冷门好用的VS Code插件,它们分别是:

  • Colorful Comments
  • arrr
  • WakaTime
  • Rainbow csv
  • 100 Days of Code


Colorful Comments


Colorful Comments是一款能够让你轻松创建更加易于阅读、对用户更加友好注释的一款VS Code插件。

注释在代码中占据着重要的地位,实现的函数是什么功能?入参和返回值分别是什么?

良好的注释,能够提升其他团队开发者的阅读效率,也能够减少自己后期维护的成本。

但是,以往的注释都过于枯燥乏味,颜色单一,没有区分度。

Colorful Comments让注释变得更加丰富多彩,更加易于区分。

使用Colorful Comments时,我们可以用不同的符号来区分注释的类型,然后VS Code就可以用不同的颜色来区分它们,这样大大提升了注释的辨识度。

不同符号和注释颜色的对应关系如下:

  • 红色 (!)
  • 蓝色 (?)
  • 绿色 (*)
  • 黄色 (^)
  • 粉红色 (&)
  • 紫色 (~)
  • 深黄 (todo)
  • 灰色 (//)

可以看一下效果:

21.png


arrr


arrr是一款在前端开发过程中非常高效的一款插件,它能够快速把HTML代码提取成一个

组件

在开发前端过程中,有很多组件是可以共用的,例如,header、footer等。当然,除了这些之外,视情况而定,在不同系统下总会有很多可以共用的组件。

如果可以共用,那么就没有必要在每个页面都去重复的写一些HTML,这样能够造成巨大的代码冗余。

针对这个问题,我们可以把公共部分提取成一个组件,这样,在用到的地方直接引入这个组件即可。

22.gif

arrr就是这样的一款插件,使用时只需要选中需要提取成组件的代码部分,能够快速的生成一个组件,并完成导入部分的代码。这样,就不用开发者再去手动复制、粘贴写一个组件,然后再繁琐的修改原有代码。


WakaTime


WakaTime是一款看板插件,可以用来监控、跟踪、统计开发者的编码情况。

每天、每周我都喜欢对自己进行一些总结,我这一天做了什么?有没有什么可量化的指标来衡量我这期间的成果和收获?

大多数时候都是模模糊糊,结果很不清晰,完成了几个待办事项?写了多少行代码?项目进展到什么程度?这些都需要自己有一个清晰的认识。

数据和图形是最能够给人带来直观感受和内心冲击的东西,例如,写了2000行代码、每天平均完成了2个需求、项目进展了45%等等。


WakaTime就是这样的一款VS Code插件,它能够直观的统计你的代码工作量,并且以看板的形式让你很容易了解自己的情况。


使用方法

WakaTime使用时需要一定的配置,首先安装插件,然后访问https://wakatime.com/网站,打开设置,复制ApiKey,然后回到VS Code中快捷键control+shift+p,搜索WakaTime:ApiKey,输入ApiKey确认即可!

23.png


Rainbow csv


Rainbow csv是一款提升CSV查看和编辑效率的神器。

CSV这种格式在工作过程中经常会用到,一般我们在做数据相关的工作,CSV常常用于存储离线数据

虽然,CSV可以用Excel打开查看,但是我个人认为这并不是一个很好的选择,数据量小的话还可以承受,但是如果数据量达到上万或者几十万,用Excel就很臃肿卡顿了,而且Excel默认还会修改数据中的一些格式,这一点非常令人反感。

如果使用Sublime、VS Code这些文本编辑器的话,就不用忍受格式和卡顿的问题了。

但是,随之而来的问题的就是可读性差,列无法对齐,很难区分到底每一列的对应关系。

24.png

Rainbow csv提供了几项强大的特性轻松解决VS Code在CSV文件中遇到的问题:

  • 高亮,轻松区分每一列
  • 悬浮,能够区分每一列的标题头信息
  • 自动检查CSV文件一致性
  • 列模式编辑
  • 能够用空格对齐
  • 能够用类SQL语言搜索查询


100 Days of Code


100 Days of Code是一款用于设定并达到目标,提升开发技能的一款VS Code插件。

我们经常会看到各种各样的100天挑战,挑战持续锻炼100天、挑战内容持续输出100天...

而100 Days of Code就是一款让你挑战开发100天,提升开发技能的一款插件。

25.png

它具有如下特性:

  • 跟踪进度:记录每日进度,指标和里程碑,以查看100天内的进度
  • 收集里程碑:在编码和解锁徽章,看到一路成就
  • 仪表板:快速查看整个挑战中的总体里程碑进度,最近的日志和总体编码时间
  • 备份数据:创建一个免费的软件帐户,能够将挑战情况备份下来

100天的代码插件基于Code Time构建,Code Time是强大的时间跟踪插件,由70,000多名开发人员组成的社区提供支持。

相关文章
|
3月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
228 1
|
27天前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
227 3
|
29天前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
63 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
3月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
132 5
vscode10大常用插件
|
2月前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
123 2
|
3月前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
|
3月前
|
JSON 前端开发 JavaScript
这 2 个插件,让你的 vscode更牛逼
这 2 个插件,让你的 vscode更牛逼
|
3月前
vscode——Prettier插件保存自动格式化
vscode——Prettier插件保存自动格式化
168 0
|
3月前
|
JavaScript Linux iOS开发
【Mac系统】Vscode使用LeetCode插件报错‘leetcode.toggleLeetCodeCn‘ not found
在Mac系统下使用VSCode的LeetCode插件时遇到“leetcode.toggleleetcodecn”命令找不到的错误解决方法,主要是通过从Nodejs官网下载并安装最新版本的Node.js来解决环境配置问题。
225 0
|
4月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
278 3