超实用:10 款开发必备的 VS Code 插件!

2020年3月7日 313点热度 0人点赞 0条评论

公众号关注 “GitHubDaily”

设为 “星标”,每天带你逛 GitHub!


图片

VS Code 是这两年非常热门的一款 IDE,它不仅有提升开发体验的界面、轻量化的编辑器,还有丰富而强大的插件,这些优秀的插件使得 VS Code 生态体系更加吸引人,让开发效率大大提升。本文来介绍 10 款高效的 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
推荐阅读:
飞机上一般是什么操作系统?
墙裂推荐!B 站上的 Python 学习资源
用了这么久,原来 GitHub 还有这种骚操作?
如何从 Windows 切换到 Linux
10 大开源酷炫的后台管理面板!
图片

66800超实用:10 款开发必备的 VS Code 插件!

这个人很懒,什么都没留下

文章评论