VS Code 是这两年非常热门的一款 IDE,它不仅有提升开发体验的界面、轻量化的编辑器,还有丰富而强大的插件,这些优秀的插件使得 VS Code 生态体系更加吸引人,让开发效率大大提升。本文来介绍 10 款高效的 VS Code 插件,总有一款能够惊艳到你。

前言

我此前写过一篇有关 VS Code 的文章:我最终还是选择了 VS code,没想到在公众号和知乎受到很多同学的喜欢,也被多个公众号先后转载。

看来,现在 VS Code 的确是一款非常热门、有强大用户基础的一款开发工具,因此,本文就来介绍 10 款高效、好用的插件,能够让原本单薄的 VS Code 如虎添翼,开发效率顿时提升到一个新的级别。

1. CodeIf

安装次数:2万+


"在计算机科学中只有两件难事:缓存失效和命名。"

我对这句话深有同感,当开发项目时,命名一直都是一种让我痛苦的事情。我想,应该不止我一个人有这样的感觉。

可是,命名又是开发过程中一项非常重要的事情,例如,一个好的函数命名,能够让你瞬间明白它实现的功能,这样就节省了很大一部分时间琢磨一段代码到底是什么含义。

所以,每当开发过程中遇到要命名的变量、函数、类时我就不得不停下开发,苦思冥想半天。


但是,CodeIf 的出现让这个问题迎刃而解,它通过搜索 GitHub, Bitbucket, GitLab 来找到真实的使用变量名,为你提供一些高频使用的词汇,同时为你标明使用的语言、代码链接。

可以直接在网页上搜索要命令的词汇,当然,它不仅有网页版,也支持 VS Code, Atom, Sublime, WebStorm 等开发工具。

在 VS Code 中,Extensions->搜索 “CodeIf” 即可完成安装。


使用时只需要选中变量名,然后右键选择 CodeIf 就可以跳转到网页,显示候选命名。

2. local history

安装次数:14万+

修改代码之后想找回历史代码怎么办?

在使用 Pycharm、IDEA 时可以直接查看本地历史代码,然后轻松恢复之前某个版本。但是,VS Code 默认是不支持 local history 的,所以,仅凭 Ctrl+z 撤销操作是不行的。何况,撤销操作是把前面步骤所有的操作都撤销了,其中有很多是我们不需要的。


但是,为 VS Code 配合上 local history,所有问问题就迎刃而解了。

安装这款插件之后在侧边栏会出现 LOCAL HISTORY 的字样,每当我们保存更改时,它都会备份一份历史文件,当我们需要恢复之前版本时,只需要点击一下对应的文件即可。此外,它还会在编辑框显示对比详情,能够让你对修改位置一目了然。

3. Partial Diff

安装次数:19万+

文件比较是一种即常用且实用的一项功能,例如,我们想查看哪里修改了代码、查看输出的日志信息有什么区别等等,如果用肉眼逐个词的去分辨,显然是无法承受的。

提起文件比较,我首先想到的就是 Beyond Compare,这是一款好用的工具,但是,仅凭收费这一点就把很多人拒之门外了。


还好,VS Code 插件库里有 Partial Diff 这款神奇的插件,选中一代码,右键 Select Text for Compare,选中另外一部分代码,右键 Compare Text with Previous Selection 即可。

4. TODO Tree

安装次数:40万+

我在此前多篇文章中提到过,习惯使用TODOFIXME标签是一个非常好的习惯。

当我们发现某块代码需要修改,或者某块代码需要以后进一步完善,如果能够给它做一个标记,那么后续定位到对应位置是一件非常轻松高效的事情。

关于TODO标签,很多作者都推荐过 TODO Highlight 这款插件,但是,我更加推荐使用 TODO Tree


虽然很多标签工具能够实现TODO标签高亮,但问题是“我们怎么快速定位到对应的标签”逐个的打开文件去寻找显然是很麻烦的,效率并没有得到太大的提升。

TODO Tree 则不同,它不仅可以实现标签高亮,还可以在活动栏添加一个选项卡,它能够以不同视图展示我们标记的位置,单击对应标签就能够快速定位到指定位置。

5. vscode-icons

安装次数:466万+

一个好的编辑界面能够让开发过程心情舒畅,甚至可以提升开发效率。

显然,VS Code 默认的图标是达不到这种程度的。


但是,配合 vscode-icons 这款插件就不同了,它具有以下特性,

•自定义图标•自动检测项目•自定义配置

它不仅能够给文件夹、文件添加上舒适的图标,而且可以自动检测项目,根据项目不同功能配上不同图标,例如,git、Markdown、配置项、工具类等等。

6. Better Comments

安装次数:66万+


是不是觉得注释信息千篇一律?

Better Comments 这款插件可以让 VS Code 注释信息更加人性化。

它可以根据告警、查询、TODO、高亮等标记对注释进行不同的展示。此外,还可以对注释掉的代码进行样式设置。另外,你想要的任何其他注释样式都可以在设置中指定。

7. Bracket Pair Colorizer

安装次数:250万+


当你看到上述示例中这样包含多层嵌套的括号时,是不是觉得很凌乱?

至少,我是这样的。

每当看到这样复杂嵌套括号时,尤其代码行数多起来以后,就很难确定哪些是处于同一层次的。不弄明白层次结构,当然阅读代码也会麻烦很多。

Bracket Pair Colorizer 这款插件可以给()[]{}这些常用括号显示不同颜色,当点击对应括号时能够用线段直接链接到一起,让层次结构一目了然。除此之外,它还支持用户自定义符号。


这款神器彻底解决了我我在开发中的痛点。

8. Better Align

安装次数:10万+

整洁的代码,是一个优秀程序员必须要做到的。当我们阅读那些大型公司开源的代码时,会发现,它的设计模式、它的编程规范都让人赞叹不已。

Better Align 就是这样一款能够实现代码规范的工具,它主要用于代码的上下对齐

它能够用冒号(:)、赋值(=,+=,-=,*=,/=)和箭头(=>)对齐代码。


使用方法:Ctrl+Shift+p 输入 “Align” 确认即可。

9. change-case

安装次数:24万+

标识符和命名规则是学习一门语言最基本,也是必须要了解的一项。

不同语言对变量名、函数名、类名的命名要求不同,有的是驼峰、有的是下划线...但是,不管是什么要求,都有一个共性--命名很重要

有些编程语言甚至对命名严格到如果不按规范要求,执行时会直接报错。

而 change-case 就是一款快速修改当前选定内容或当前单词的命名的插件。


使用方法:Ctrl+Shift+p 输入 “change” 然后选择要修改的格式即可。

10. Markdown All in One

安装次数:119万+


Markdown 对于开发者而言,应该是一种常用的文档书写方式,虽然我在独立 Markdown 文档书写时习惯于使用 Typora,但是对于开发过程中涉及到的 API 接口文档、README,我还是习惯于使用 VS Code。

Markdown All in One 这款插件可以实现媲美 Typora 的 Markdown 编辑体验,它具备如下特性,

•丰富的快捷键•TOC 标签•数学公式•自动完成•列表编辑•输出 HTML 同时转PDF•Github 风格文档•......

这款插件真正做到了 All in One


END—

本文分享自微信公众号 - 生信科技爱好者(bioitee)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

10 款 VS Code 插件神器,第 7 款超级实用!的更多相关文章

  1. 介绍一款chrom浏览器插件 DHC是一款使用chrome模拟REST客户端向服务器发送测试数据的谷歌浏览器插件

    先打个小广告哈 公司招java架构师,月薪25K以上,负责电商平台架构工作,工作地点在北京 1号线永安里站 附近,如有意向 请把简历发我邮箱jia6235@163.com 可以内部推荐. DHC是一款 ...

  2. 全栈开发必备的10款Sublime Text 插件

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  3. 全栈开发必备的10款 Sublime Text 插件

    Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,多重选择,快捷命令等.Sublime Text 更妙的是它的可扩展性.所以,这里挑选了全栈开发必备的10款 Sublime T ...

  4. 10种JavaScript开发者必备的VS Code插件

    摘要: 好的代码插件可以让工作效率翻倍,心情也更加舒畅! 原文:10 Must-have VS Code Extensions for JavaScript Developers 作者:Michael ...

  5. 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

    本文翻译自:https://www.sitepoint.com/vs-code-extensions-javascript-developers/ 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的 ...

  6. 那些好用的 VS Code 插件,究竟是如何提高编码效率的?

    在上一篇文章中我们已经对 vscode 插件有了一个初步的认识与了解了,接下去我们就要"揭秘"一下市面上那些好用的 vscode 插件究竟是如何帮我们提高工作效率的. 本文首发于「 ...

  7. 低代码开发,推荐一款Web 端自动化神器:Automa

    1. Automa介绍 又到了优秀工具推荐的时候了,今天给大家分享一款前端自动化操作神器: Automa . 首先了解一下Automa是什么? Automa它定位是一款 Chrome 插件,也就意味着 ...

  8. 15款Chrome浏览器插件让设计师告别拖延症

    秋高气爽,分享一大波有效帮助设计师提高工作效率的Chrome浏览器扩展程序! 高效是另一种王道 无论是在工作中,还是在生活中,有些词我们说来就满满正能量,而另外一些话提起就很沮丧,后者如拖延症,前者如 ...

  9. 移动开发必备!15款jQuery Mobile插件

    移动互联网的发展,来自PC端的网页并不能完全自适应移动端页面需求,使得响应式设计体验产生并成为潮流,也正是这样一种需求,促成了jQuery Mobile的流行.jQuery Mobile这样一款基于j ...

  10. jquery+css3打造一款ajax分页插件

    原文:[原创]jquery+css3打造一款ajax分页插件 最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认 ...

随机推荐

  1. 如何使用 vue + intro 实现后台管理系统的引导

    引言 为了让用户更好的适应新版,或更方便使用公司内部系统,可以加入新手指引功能.如果你也想在自己的网页加入用户指引,那就试试在 vue 中使用 Intro.js 吧,它能够很轻松的制作出新手指引的效果 ...

  2. PHP的序列化和反序列化

    PHP序列化 什么是PHP序列化 serialize() //将一个对象转换成一个字符串 unserialize() //将字符串还原成一个对象 通过序列化与反序列化我们可以很方便的在PHP中进行对象 ...

  3. 位运算符n&(n-1)详解与妙用

    用处一:求一个int类型数是否为2的幂 1.当n=4时,二进制为:0100 n-1=3,二进制为:0011 则:n&(n-1)==0  解释(将0100最右边的1变为0 则 0000=0) 2 ...

  4. UnrealEngine - 反射系统分析

    1. 反射 什么是反射?或者说反射能做什么,简单来说,反射可以提供一种能力,能够在运行时动态获取对象的成员信息,如成员函数,成员变量. UE 在其反射系统上支持了许多功能,如: 编辑器中可供编辑的属性 ...

  5. 第三章3.3 selenium基础

    seleniumIDE:是一款可以实现录制回放的操作:存在可视化窗口进行录制回放操作:它属于firefox(chrome)浏览器的插件;安装方式:两种 : 1.下载安装包离线安装2.在线安装 注意:不 ...

  6. 逍遥自在学C语言 | 位运算符的基础用法

    前言 一.人物简介 第一位闪亮登场,有请今后会一直教我们C语言的老师 -- 自在. 第二位上场的是和我们一起学习的小白程序猿 -- 逍遥. 二.构成和表达方式 位运算符是一组用于在二进制数之间进行操作 ...

  7. Python爬取pexels图片

    研究Python爬虫,网上很多爬取pexels图片的案例,我下载下来运行没有成功,总量有各种各样的问题. 作为菜鸟初学者,网上的各个案例代码对我还是有不少启发作用,我用搜索引擎+chatGPT逐步对代 ...

  8. 一天吃透MySQL面试八股文

    什么是MySQL MySQL是一个关系型数据库,它采用表的形式来存储数据.你可以理解成是Excel表格,既然是表的形式存储数据,就有表结构(行和列).行代表每一行数据,列代表该行中的每个值.列上的值是 ...

  9. 关于Java中方法重载和方法重写

    方法重写是子类继承父类(默认继承Object类)后覆盖父类的方法 需要保证同名 同参 同返回值 且访问权限范围不能缩小(public>protected>default>privat ...

  10. java处理集合工具

    public static <K, V> Map<K, V> parseListToMap(Collection<V> list, Function<V, K ...