本文不做任何编辑器的比较，只是我本人日常运用 vscode 进行开发，而且比较喜爱折腾 vscode ，会处处找这一些好玩的插件，所以越攒越多，今天给咱们引荐一下我保藏的 60 多个 vscode 插件，据说插件装太多，编辑器会变卡，或许是我的电脑装备还顶得住，现在并没有感觉到卡卡的。

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

一是把它们 共享 给有需求的小伙伴们，二是经过此文向小伙伴们 搜集 其它好玩的插件，能够是任何类型的。有想要引荐其它插件的请评论区弥补一下，我看到后会增加到文章中并标示出你的 ID 。

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

优化外观

好马用好鞍，美观的编辑器外观，能够提高程序员的编码体会，能够让开发人员的心情变好，让写 bug 更有动力。

Better Comments

一款美化注释的插件，能够依据不同种类的注释，显现不同的色彩，一望而知。

image.png

装置完今后，插件会默许自带几种色彩的注释，还能够经过 vscode 的装备文件自界说任何色彩，类型的注释。详细的装备办法我给你们找好了。

vscode 插件-better comments-代码注释高亮

Bracket Pair Colorizer / Bracket Pair Colorizer 2

这是一个找对象的插件，不是帮你们找对象啊，是帮你找到括号的另一半。现在有两个版别，Bracket Pair Colorizer 2 是增强版，详细我没有深入研讨详细增强了哪些内容。而且它有挺多的设置项，反正装置完默许的装备现已够用了，感兴趣的同学自行发觉更多有趣玩法吧。

image.png

咱们能够看到配对的括号是相同的色彩，而且当我选中一个括号今后，会呈现一条线帮你找到它对应的另一半括号。

Highlight Matching Tag

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

Chinese

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

Color Highlight

看姓名就知道了，用于给咱们代码中的色彩进行高亮展现的插件。能够看到下图中我设置的 css 色彩属性，直观的展现了出来。

image.png

Community Material Theme / Material Theme

image.png

修正编辑器的主题，内置许多种，我用的是 Material Theme Palenight High Contrast 这一款。装置完了今后点击 设置色彩主题 就能够了。

Material Theme Icons

image.png

设置文件图标的，这个插件的长这个姿态，还有许多其它修正文件图标的插件，不喜爱这一款的，咱们能够自行找一找。

image.png

Error Gutters

image.png

报错的地方都有大红波涛线提示，能够说是十分的直观了。

image.png

Image preview

image.png

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

20210603225907507.gif

indent-rainbow

image.png

看姓名就知道了，彩虹缩进，便是把代码不同的缩进展现不同的色彩。

image.png

Indenticator

image.png

当你点击一个缩进部分的时分，会呈现一条白线来告知你当前处于的缩进层级，能够更便利的查看代码结构。

20180508105328382.gif

Trailing Spaces

image.png

把尾随空格显现出来。

image.png

VSCode Great Icons

image.png

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

image.png

功用扩展

编辑器自身的功用仍是有限的，为了应付日常开发，不得不装置许多其他的软件进行辅助，不过也能够经过插件的方式引入一些常用的辅助软件，它们的功用或许没有原生的强壮，可是根本上现已够用，而且是真的很便利。

AZ AL Dev Tools/AL Code Outline

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

image.png

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

12.gif

注：它这个里边如同是默许翻开的，应该是能够设置是否默许翻开，但我没研讨过，感兴趣的大佬能够深入调查一下。

Code Runner

运行代码，能够在编辑器中查看成果，前端同学能够在控制台看 console.log ，还有许多其他玩法，详细运用参阅此篇文章

VSCode插件引荐 | Code Runner: 代码一键运行，支撑超越40种语言

image.png

CodeIf

image.png

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

可是命名又是开发过程中一项十分重要的工作，一个好的函数命名，能够让你瞬间理解它完成的功用，所以，每逢开发过程中遇到要命名的变量、函数、类时就要冥思苦想，各种翻译。

可是，CodeIf 的呈现让这个问题方便的解决，它经过查找 GitHub, Bitbucket, GitLab 来找到真实的运用变量名，为你供给一些高频运用的词汇。

运用时只需求选中变量名，然后 右键 挑选 CodeIf 就能够跳转到网页，显现候选命名。

image.png

Color Info

image.png

查看色彩详细信息的插件，能够小窗口显现色彩值，rgb,hsl,cmyk,hex等等，能够在装备项里增加要展现的信息类型。

image.png

Code Spell Checker

image.png

查看代码中单词拼写是否正确，当单词不正常的时分，就会在下方呈现波涛线进行提示，还能够自界说词典，忽略某个单词的查看等，更多用法参阅下面链接。

VSCode中插件Code Spell Checker

image.png

Debugger for Chrome

这款插件是专门为前端调试开发的，很便利调试，跟谷歌的控制台是相同的功用，装置今后，无需翻开浏览器的控制台就能进行断点调试。对应的还有 Debugger for Firefox，Debugger for Microsoft Edge等，其他的我没用过，咱们按需装置即可，运用办法应该都迥然不同。

image.png

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

image.png

装备文件的详细内容和运用办法能够看这一篇，很详细。

VSCode装备 Debugger for Chrome插件

Git History

image.png

右键单击文件挑选 Git：View File History 来以列表的方式查看所有的提交记载。

2.gif

GitLens — Git supercharged

这个也是跟 git 相关的插件，功用比上一个要强壮一些。上一个插件的演示图片中能够看到我的每一行代码都有上一次 git 提交的记载，那便是这个插件的功劳。

还有其他许多的操作，详情查阅下方链接。

VsCode中好用的git源代码办理插件GitLens

image.png

LeetCode

能够在 vscode 中刷算法题的。我自己没用过

image.png

Local History

image.png

这个就很强了，本地代码的修正记载。一般咱们写错代码了能够吊销，可是吊销完今后再修正，想要吊销吊销就难了。有了这个插件直接看代码的修正记载。还能够跟当前版别进行对比，神器。

装置完今后，项目根目录下会主动生成 .history 的文件夹。代码的修正记载就会放在这里边。记住增加.gitignore，不然每次提交代码的时分就要遭重了。

image.png

open in browser

在浏览器中翻开 html 文件。

image.png

装置完今后在方针的 html 文件上右击，挑选 open in default browser 即可翻开运用浏览器翻开文件。

image.png

Partial Diff

image.png

文件比较界的大拿肯定是 Beyond Compare 了，可是它是收费的！那么 Partial Diff 这款奇特的插件就成为了良好的替代品，选中一代码，右键 Select Text for Compare ，选中别的一部分代码，右键Compare Text with Previous Selection即可。我的是中文的，就更明显了

45.gif

Postcode

Postman 都听说过吧，这个插件就根本上能够理解为，在 vscode 里边运用 postman 。

image.png

装置完今后左边菜单会呈现一个 小盒子 的图标，点开今后点击 Create Request 就能够正常运用了。

image.png

假如您正在学习Spring Boot，那么引荐一个连载多年还在继续更新的免费教程：blog.didispace.com/spring-boot…

Project Manager

image.png

项目办理器，适用于经常切换项意图大佬，虽然我平常接触的项目也不多，不过自己搞着玩的工程也不少。有了这个插件，就不用新窗口翻开项目了。

装置完今后左边列表会呈现一个 文件夹 的小图标，点开今后就能够进行项目办理了，一般都是操作projects.json 这个文件，点击项目姓名就能够切换了，也能够新窗口翻开。

image.png

Quokka.js

image.png

实时显现代码的运行成果，运用办法请跳转链接

VS Code插件之Quokka.js

vsc-intro.gif

提高编码功率

怎么达到极致的编码功率，当然是能不手写则不手写。下面这些插件便是辅助咱们进行一些主动化，这样就能够节省下许多的时刻用来摸鱼了。

Auto Import

Typescript 主动导入，其完成在许多的插件根本都内置了这种功用，现已不是必须品了。或许是由于我装了各种奇奇怪怪的插件，我现在想导入什么东西的时分，一大堆的提示，随意选一个都能导进来

image.png

Auto Rename Tag

主动修正标签名，重命名一个开端标签时，主动重命名配对的结束标签。

image.png

一下子就对应的全修正掉了，是不是很 nice。

1.gif

change-case

image.png

快速切换变量格局，什么大坨峰，小驼峰，下划线等等，它里边有许多类型。运用办法按 F1（windows） ，输入对应指令即可。

44.gif

CSS Peek

能够经过点击类名迅速定位到款式的界说。不知道是不是我自己的原因，有的时分会失效，需求点击 禁用 ，再点击 启用 就好使了。详细运用办法参阅链接

cssPeek插件大大提高你的开发功率

ECMAScript Quotes Transformer

用于 模板字符串 和 普通字符串拼接 的彼此转化，但其实我日常开发根本上都是一致运用模板字符串的，很少有这种互相转化的需求。

image.png

用法也是十分简略，选中需求转化的行，按 f1 输入指令即可，一般输入 esq 就呈现提示了。

1.gif

embrace

快速的在选中代码两头增加各种引号、括号，不用来回移动光标，不过如同现在市面上的编辑器大多都内置这功用了吧

image.png

File Utils

image.png

创建，仿制，移动，重命名，删去文件和目录的快捷办法，演示图片来自官网。

javascript console utils

前端人员的调试少不了 console.log ，那么这便是一款快速生成 console.log 的插件。运用办法十分简略， 选中变量，然后按 ctrl + shift + L 就能够生成了。需求删去的时分按 ctrl + shift + D 即可删去。

json2ts

主动把 json 格局转成 ts 的类型，仿制 json 之后按 ctrl + alt + v 即可。

koroFileHeader

image.png

主动增加 头部注释 和 函数注释 的插件。支撑自界说内容，需求在 settings.json 中进行自界说装备。

image.png

//主动生成注释插件文件头部注释
"fileheader.customMade":{
"Author":"一尾流莺",
"Description":"",
"Date":"Donotedit",
"LastEditTime":"Donotedit",
"FilePath":""
},
//主动生成注释插件函数注释
"fileheader.cursorMode":{
"description":"",
"param":"",
"return":""
},
仿制代码

Mithril Emmet

快速生成代码结构，不过如同新版别 vscode 现已内置了。

image.png

Path Intellisense

image.png

引入文件的时分，途径主动补全。

咱们创建了一个高质量的技术交流群，与优异的人在一起，自己也会优异起来，赶忙点击加群，享用一起生长的高兴。别的，假如你最近想换岗的话，年前我花了2周时刻收集了一波大厂面经，节后预备换岗的能够点击这里收取！

Npm Intellisense

image.png

导入 npm 包的时分，智能提示。

444.gif

px to rem & rpx (cssrem)

主动换算单位的插件。

image.png

很简略，呈现提示今后回车即可。

1.gif

Turbo Console Log

image.png

另一个用来生成 console.log 的插件，不同的是，他支撑自界说 console.log 的内容，包括文件名，途径，大小等，还能够增加自己喜爱的 emoji 表情，快捷键 ctrl + alt + L。

image.png

代码片段类插件

这一类的插件都许多，但功用都是供给代码片段，效果便是运用几个字符的简写，就能够敲出整段代码。

image.png

• JavaScript (ES6) code snippets

• Jest Snippets

• HTML Snippets

• Vue VSCode Snippets

• Vue 3 Snippets

• … …

3.gif

代码格局化

Beautify

用来代码格局化的，可是我如同装置了没怎么用，我一直都是 eslint + prettier，有正在用的小伙伴能够在评论区宣布一下观点，感兴趣的请自己查找运用办法。

image.png

ESLint

这个就不用说了吧，代码查看，不符合标准的就会跟你报错，或者警告。详细的标准需求在根目录下新建 .eslintrc.js 文件去装备，也能够用许多大公司现有的标准，太复杂了就不细讲了，贴出教程链接。

Eslint 超简略入门教程

image.png

Prettier – Code formatter

代码格局化插件，这个插件一般搭配 eslint 运用，也能够独自运用。

image.png

在根目录下新建 .prettierrc.json 文件，在里边书写自己想要的格局就行了。更详细的装备内容查看链接

# vscode 运用Prettier插件格局化装备运用

image.png

vetur / volar

image.png

image.png

运用 vue 进行开发的小伙伴都少不了跟它们打交道，volar 是跟 vue3 更配的，功用也能多，由于这两个插件功用过于巨大，就不翻开讲了，感兴趣的自行查找运用。

咱们创建了一个高质量的技术交流群，与优异的人在一起，自己也会优异起来，赶忙点击加群，享用一起生长的高兴。别的，假如你最近想换岗的话，年前我花了2周时刻收集了一波大厂面经，节后预备换岗的能够点击这里收取！

其他好玩的插件

除了功用性插件，当然还有许多花里胡哨的玩意。下面给咱们介绍几款或许对开发影响不大，可是十分好玩的插件。

小霸王

还记住小时分玩的手柄游戏吗？大佬现已给咱们出了插件了，不过我仍是要友情提示一句：游戏有危险，摸鱼需谨慎！

image.png

操作十分简略，装置完左边会呈现游戏手柄图标，点击翻开就能够下载游戏进行游玩。

image.png

Emoji

image.png

在代码中增加 emoji 表情，我自己除了写一些注释，console.log 之外，根本没有别的效果，可是挺好玩的，别人看你的代码中各种小表情，也会觉得你是一个可爱的人吧。

它的官方示例里边还能够把 emoji 设为变量名，我可不主张你们这样做。运用办法也是十分的简略，按 f1（windows） 输入 emoji ，能够看到有三个选项，分别是 emoji 表情，markdown 下的 emoji，还有 unicode 下的 emoji。选中一个模式回车进入列表，再回车就能够输入到代码中了。

2.gif

Settings Sync

能够同步 vscode 装备的插件，由于我没有换过电脑，所以还没亲测，可是网上用的人仍是蛮多的。

联络小熊：