本文不做任何编辑器的比较，只是我本人日常使用 vscode 进行开发，并且比较喜欢折腾 vscode ，会到处找这一些好玩的插件，于是越攒越多，今天给大家推荐一下我收藏的 60 多个 vscode 插件，据说插件装太多，编辑器会变卡，可能是我的电脑配置还顶得住，目前并没有感觉到卡卡的。

接下来我会将会以 优化外观，功能扩展，提升编码效率，代码格式化，其它插件 几个分类来进行介绍。

注：本文只涉及插件的基本使用，也就是让你知道存在这样一种插件，以及大致了解这个插件可以做什么事，部分插件的详细配置过于复杂，有需要的小伙伴请自行冲浪。根据每个人电脑，vscode 配置，以及插件的不同，部分插件可能在你电脑上不会生效。文中提到的快捷键都是 windows 下的，其他操作系统的快捷键请自行了解。

好马用好鞍，好看的编辑器外观，可以提升程序员的编码体验，可以让开发人员的心情变好，让写 bug 更有动力。

Better Comments

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

安装完以后，插件会默认自带几种颜色的注释，还可以通过 vscode 的配置文件自定义任何颜色，类型的注释。具体的配置方法我给你们找好了。

Bracket Pair Colorizer / Bracket Pair Colorizer 2

这是一个找对象的插件，不是帮你们找对象啊，是帮你找到括号的另一半。目前有两个版本，Bracket Pair Colorizer 2 是增强版，具体我没有深入研究具体增强了哪些内容。而且它有挺多的设置项，反正安装完默认的配置已经够用了，感兴趣的同学自行发觉更多有趣玩法吧。

大家可以看到配对的括号是相同的颜色，并且当我选中一个括号以后，会出现一条线帮你找到它对应的另一半括号。

Highlight Matching Tag

这也是一个找对象的插件，找的是标签的对象，看我上一个插件的演示图片中，当我点击一下 html 标签，配对的标签就会出现下划线来指示你谁和谁是一对。

Chinese

让你的 vscode 变成中文，像我这种英语弱鸡才会用，大佬们略过。为什么要放在优化外观的分类里，因为我觉得中文比英文好看，安装完重启就行了。

Color Highlight

看名字就知道了，用于给我们代码中的颜色进行高亮展示的插件。可以看到下图中我设置的 css 颜色属性，直观的展示了出来。

Community Material Theme / Material Theme

修改编辑器的主题，内置很多种，我用的是 Material Theme Palenight High Contrast 这一款。安装完了以后点击 设置颜色主题 就可以了。

Material Theme Icons

设置文件图标的，这个插件的长这个样子，还有很多其它修改文件图标的插件，不喜欢这一款的，大家可以自行找一找。

Error Gutters

报错的地方都有大红波浪线提示，可以说是非常的直观了。

Image preview

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

indent-rainbow

看名字就知道了，彩虹缩进，就是把代码不同的缩进展示不同的颜色。

Indenticator

当你点击一个缩进部分的时候，会出现一条白线来告诉你当前处于的缩进层级，可以更方便的查看代码结构。

Trailing Spaces

把尾随空格显示出来。

VSCode Great Icons

另一个修改文件图标的插件，我用的就是这个，相对于 Material Theme Icons 我更喜欢这个的风格，萝卜青菜可有所爱，大家各取所需。

编辑器自身的功能还是有限的，为了应付日常开发，不得不安装很多其他的软件进行辅助，不过也可以通过插件的方式引入一些常用的辅助软件，它们的功能可能没有原生的强大，但是基本上已经够用，并且是真的很方便。

AZ AL Dev Tools/AL Code Outline

用来梳理代码结构的插件，安装完后在文件图标里就会多出一个 AL OUTLINE 的选项。

为了演示我找了一个比较长，比较典型的 vue 文件，请忽略我的代码内容，专注于插件的功能， 可以看到展开第一层是极具 vue 单文件组件特点的 template，script，style。逐层展开就可以看到 dom 节点， methods 里面定义的函数等，然后点击就可以快速定位到目标所在位置，妈妈再也不用担心我全局搜啦！

注：它这个里面好像是默认展开的，应该是可以设置是否默认展开，但我没研究过，感兴趣的大佬可以深入调查一下。

Code Runner

运行代码，可以在编辑器中查看结果，前端同学可以在控制台看 console.log ，还有很多其他玩法，具体使用参考此篇文章

CodeIf

在网上看到一句话，在计算机科学中只有两件难事:缓存失效和命名。哈哈哈，确实如此，当开发项目时，命名一直都是一种让人痛苦的事情。

但是命名又是开发过程中一项非常重要的事情，一个好的函数命名，能够让你瞬间明白它实现的功能，所以，每当开发过程中遇到要命名的变量、函数、类时就要冥思苦想，各种翻译。

但是，CodeIf 的出现让这个问题迎刃而解，它通过搜索 GitHub, Bitbucket, GitLab 来找到真实的使用变量名，为你提供一些高频使用的词汇。

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

Color Info

查看颜色详细信息的插件，可以小窗口显示颜色值，rgb,hsl,cmyk,hex等等，可以在配置项里添加要展示的信息类型。

Code Spell Checker

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

Debugger for Chrome

这款插件是专门为前端调试开发的，很方便调试，跟谷歌的控制台是一样的功能，安装以后，无需打开浏览器的控制台就能进行断点调试。对应的还有 Debugger for Firefox，Debugger for Microsoft Edge等，其他的我没用过，大家按需安装即可，使用方法应该都大同小异。

安装完以后，左边会出现一个调试的小图标，打开以后再点击上方小齿轮进行配置。根目录下会自动新建 .vscode 文件夹以及 launch.json 文件，不用管。