共计 5933 个字符，预计需要花费 15 分钟才能阅读完成。
起源：一尾流莺 \
链接：https://juejin.cn/post/699432…
本文不做任何编辑器的比拟，只是我自己日常应用 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 文件，不必管。
配置文件的具体内容和应用办法能够看这一篇，很具体。
Git History
右键单击文件抉择 Git：View File History 来以列表的模式查看所有的提交记录。
GitLens — Git supercharged
这个也是跟 git 相干的插件，性能比上一个要弱小一些。上一个插件的演示图片中能够看到我的每一行代码都有上一次 git 提交的记录，那就是这个插件的功绩。
还有其余很多的操作，详情查阅下方链接。
LeetCode
能够在 vscode 中刷算法题的。我本人没用过😣😣
Local History
这个就很强了，本地代码的批改记录。通常咱们写错代码了能够撤销，然而撤销完当前再批改，想要勾销撤销就难了。有了这个插件间接看代码的批改记录。还能够跟以后版本进行比照，神器。
装置完当前，我的项目根目录下会主动生成 .history 的文件夹。代码的批改记录就会放在这外面。记得增加.gitignore，不然每次提交代码的时候就要遭重了。
open in browser
在浏览器中关上 html 文件。
装置完当前在指标的 html 文件上右击，抉择 open in default browser 即可关上应用浏览器关上文件。
Partial Diff
文件比拟界的大拿必定是 Beyond Compare 了，然而它是免费的！那么 Partial Diff 这款神奇的插件就成为了良好的替代品，选中一代码，右键 Select Text for Compare，选中另外一部分代码，右键Compare Text with Previous Selection 即可。我的是中文的，就更显著了🤣🤣
Postcode
Postman 都据说过吧，这个插件就基本上能够了解为，在 vscode 外面应用 postman。
装置完当前左侧菜单会呈现一个 小盒子 的图标，点开当前点击 Create Request 就能够失常应用了。
Project Manager
我的项目管理器，实用于常常切换我的项目的大佬，尽管我平时接触的我的项目也不多，不过本人搞着玩的工程也不少。有了这个插件，就不必新窗口关上我的项目了。
装置完当前左侧列表会呈现一个 文件夹 的小图标，点开当前就能够进行项目管理了，通常都是操作projects.json 这个文件，点击我的项目名字就能够切换了，也能够新窗口关上。
Quokka.js
实时显示代码的运行后果，应用办法请跳转链接
如何达到极致的编码效率，当然是能不手写则不手写。上面这些插件就是辅助大家进行一些自动化，这样就能够节省下很多的工夫用来摸鱼了。
Auto Import
Typescript 主动导入，其实当初很多的插件根本都内置了这种性能，曾经不是必须品了。可能是因为我装了各种奇奇怪怪的插件，我当初想导入什么货色的时候，一大堆的提醒，轻易选一个都能导进来😂
Auto Rename Tag
主动批改标签名，重命名一个开始标签时，主动重命名配对的完结标签。
一下子就对应的全批改掉了，是不是很 nice。
change-case
疾速切换变量格局，什么大坨峰，小驼峰，下划线等等，它外面有很多类型。应用办法按 F1（windows），输出对应命令即可。
CSS Peek
能够通过点击类名迅速定位到款式的定义。不晓得是不是我本人的起因，有的时候会生效，须要点击 禁用 ，再点击 启用 就好使了。具体应用办法参考链接
ECMAScript Quotes Transformer
用于 模板字符串 和 一般字符串拼接 的互相转化，但其实我日常开发基本上都是对立应用模板字符串的，很少有这种互相转化的需要。
用法也是非常简单，选中须要转化的行，按 f1 输出命令即可，个别输出 esq 就呈现提醒了。
embrace
疾速的在选中代码两边增加各种引号、括号，不必来回挪动光标，不过如同当初市面上的编辑器大多都内置这性能了吧🤨🤨
File Utils
创立，复制，挪动，重命名，删除文件和目录的便捷办法，演示图片来自官网。
javascript console utils
前端人员的调试少不了 console.log，那么这就是一款疾速生成 console.log 的插件。应用办法非常简单，选中变量，而后按 ctrl + shift + L 就能够生成了。须要删除的时候按 ctrl + shift + D 即可删除。
json2ts
主动把 json 格局转成 ts 的类型，复制 json 之后按 ctrl + alt + v 即可。
koroFileHeader
主动增加 头部正文 和 函数正文 的插件。反对自定义内容，须要在 settings.json 中进行自定义配置。
"fileheader.customMade": {
"Author": "一尾流莺",
"Description": "","Date":"Do not edit","LastEditTime":"Do not edit","FilePath":""
},
"fileheader.cursorMode": {
"description": "","param":"",
"return": ""
},Mithril Emmet
疾速生成代码构造，不过如同新版本 vscode 曾经内置了。
Path Intellisense
引入文件的时候，门路主动补全。
Npm Intellisense
导入 npm 包的时候，智能提醒。
px to rem & rpx (cssrem)
主动换算单位的插件。
很简略，呈现提醒当前回车即可。
Turbo Console Log
另一个用来生成 console.log 的插件，不同的是，他反对自定义 console.log 的内容，包含文件名，门路，大小等，还能够增加本人喜爱的 emoji 表情，快捷键 ctrl + alt + L。
代码片段类插件
这一类的插件都很多，但性能都是提供代码片段，作用就是应用几个字符的简写，就能够敲出整段代码。
- JavaScript (ES6) code snippets
- Jest Snippets
- HTML Snippets
- Vue VSCode Snippets
- Vue 3 Snippets
- … …
Beautify
用来代码格式化的，然而我如同装置了没怎么用，我始终都是 eslint + prettier，有正在用的小伙伴能够在评论区发表一下认识，感兴趣的请本人搜寻应用办法。
ESLint
这个就不用说了吧，代码查看，不符合规范的就会跟你报错，或者正告。具体的标准须要在根目录下新建 .eslintrc.js 文件去配置，也能够用很多大公司现有的标准，太简单了就不细讲了，贴出教程链接。
Prettier – Code formatter
代码格式化插件，这个插件通常搭配 eslint 应用，也能够独自应用。
在根目录下新建 .prettierrc.json 文件，在外面书写本人想要的格局就行了。更具体的配置内容查看链接
vetur / volar
应用 vue 进行开发的小伙伴都少不了跟它们打交道，volar 是跟 vue3 更配的，性能也能多，因为这两个插件性能过于宏大，就不开展讲了，感兴趣的自行搜寻应用。
除了功能性插件，当然还有很多花里胡哨的玩意。上面给大家介绍几款可能对开发影响不大，然而十分好玩的插件。
小霸王
还记得小时候玩的手柄游戏吗？大佬曾经给咱们出了插件了，不过我还是要情谊揭示一句：游戏有危险，摸鱼需谨慎！
操作非常简单，装置完左侧会呈现游戏手柄图标，点击关上就能够下载游戏进行游玩。
Emoji
在代码中增加 emoji 表情，我本人除了写一些正文，console.log 之外，根本没有别的作用，然而挺好玩的，他人看你的代码中各种小表情，也会感觉你是一个可恶的人吧。
它的官网示例外面还能够把 emoji 设为变量名，我可不倡议你们这样做。应用办法也是十分的简略，按 f1（windows） 输出 emoji，能够看到有三个选项，别离是 emoji 表情，markdown 下的 emoji，还有 unicode 下的 emoji。选中一个模式回车进入列表，再回车就能够输出到代码中了。
Settings Sync
能够同步 vscode 配置的插件，因为我没有换过电脑，所以还没亲测，然而网上用的人还是蛮多的。
近期热文举荐：
1.1,000+ 道 Java 面试题及答案整顿(2022 最新版)
2. 劲爆！Java 协程要来了。。。
3.Spring Boot 2.x 教程，太全了！
4. 别再写满屏的爆爆爆炸类了，试试装璜器模式，这才是优雅的形式！！
5.《Java 开发手册（嵩山版）》最新公布，速速下载！
感觉不错，别忘了顺手点赞 + 转发哦！
