作者:一尾流莺
https://juejin.cn/post/6994327298740600839
本文不做任何编辑器的比较,只是我本人日常使用 vscode
进行开发,并且比较喜欢折腾 vscode
,会到处找这一些好玩的插件,于是越攒越多,今天给大家推荐一下我收藏的 60 多个 vscode
插件,据说插件装太多,编辑器会变卡,可能是我的电脑配置还顶得住,目前并没有感觉到卡卡的。
接下来我会将会以 优化外观,功能扩展,提升编码效率,代码格式化,其它插件 几个分类来进行介绍。
一是把它们 分享 给有需要的小伙伴们,二是通过此文向小伙伴们 征集 其它好玩的插件,可以是任何类型的。有想要推荐其它插件的请评论区补充一下,我看到后会添加到文章中并标注出你的 ID 。
注:本文只涉及插件的基本使用,也就是让你知道存在这样一种插件,以及大致了解这个插件可以做什么事,部分插件的详细配置过于复杂,有需要的小伙伴请自行冲浪。根据每个人电脑,vscode
配置,以及插件的不同,部分插件可能在你电脑上不会生效。文中提到的快捷键都是windows
下的,其他操作系统的快捷键请自行了解。
优化外观
好马用好鞍,好看的编辑器外观,可以提升程序员的编码体验,可以让开发人员的心情变好,让写 bug
更有动力。
Better Comments
一款美化注释的插件,可以根据不同种类的注释,显示不同的颜色,一目了然。
![eae9c6d6127bcce76e0de46d23e48ebf.png](https://img-blog.csdnimg.cn/img_convert/eae9c6d6127bcce76e0de46d23e48ebf.png)
安装完以后,插件会默认自带几种颜色的注释,还可以通过 vscode
的配置文件自定义任何颜色,类型的注释。具体的配置方法我给你们找好了。
👉👉 vscode 插件-better comments-代码注释高亮[1]
![65015ad22a184e03146b364fd9fe3e36.png](https://img-blog.csdnimg.cn/img_convert/65015ad22a184e03146b364fd9fe3e36.png)
Bracket Pair Colorizer / Bracket Pair Colorizer 2
这是一个找对象的插件,不是帮你们找对象啊,是帮你找到括号的另一半。目前有两个版本,Bracket Pair Colorizer 2
是增强版,具体我没有深入研究具体增强了哪些内容。而且它有挺多的设置项,反正安装完默认的配置已经够用了,感兴趣的同学自行发觉更多有趣玩法吧。
![b8e19441e4d84280852cea5c6dc1c33f.png](https://img-blog.csdnimg.cn/img_convert/b8e19441e4d84280852cea5c6dc1c33f.png)
大家可以看到配对的括号是相同的颜色,并且当我选中一个括号以后,会出现一条线帮你找到它对应的另一半括号。
![2d1a80e24e16a13a4962f95d2845f4a5.png](https://img-blog.csdnimg.cn/img_convert/2d1a80e24e16a13a4962f95d2845f4a5.png)
Highlight Matching Tag
这也是一个找对象的插件,找的是标签的对象,看我上一个插件的演示图片中,当我点击一下html
标签,配对的标签就会出现下划线来指示你谁和谁是一对。
![0b350649faa0e30fa1f5db8051006e0e.png](https://img-blog.csdnimg.cn/img_convert/0b350649faa0e30fa1f5db8051006e0e.png)
Chinese
让你的 vscode
变成中文,像我这种英语弱鸡才会用,大佬们略过。为什么要放在优化外观的分类里,因为我觉得中文比英文好看🧐🧐,安装完重启就行了。
![026de192591d9c5000f1a799bbd2285a.png](https://img-blog.csdnimg.cn/img_convert/026de192591d9c5000f1a799bbd2285a.png)
Color Highlight
![e558263f18ca24ee380c18ced636b08e.png](https://img-blog.csdnimg.cn/img_convert/e558263f18ca24ee380c18ced636b08e.png)
看名字就知道了,用于给我们代码中的颜色进行高亮展示的插件。可以看到下图中我设置的 css
颜色属性,直观的展示了出来。
![8764da892764507d61f55893e4be2869.png](https://img-blog.csdnimg.cn/img_convert/8764da892764507d61f55893e4be2869.png)
Community Material Theme / Material Theme
![d1e22059eab65a01ea6448634a1af5bc.png](https://img-blog.csdnimg.cn/img_convert/d1e22059eab65a01ea6448634a1af5bc.png)
修改编辑器的主题,内置很多种,我用的是 Material Theme Palenight High Contrast
这一款。安装完了以后点击 设置颜色主题 就可以了。
Material Theme Icons
![c7d110152efbcd5206fdfaa090035f2a.png](https://img-blog.csdnimg.cn/img_convert/c7d110152efbcd5206fdfaa090035f2a.png)
设置文件图标的,这个插件的长这个样子,还有很多其它修改文件图标的插件,不喜欢这一款的,大家可以自行找一找。
![b9f94b5e5c7efca38513c35ceb8cf60a.png](https://img-blog.csdnimg.cn/img_convert/b9f94b5e5c7efca38513c35ceb8cf60a.png)
Error Gutters
![fcb675bf696339950e2f4f6e44b904b7.png](https://img-blog.csdnimg.cn/img_convert/fcb675bf696339950e2f4f6e44b904b7.png)
报错的地方都有大红波浪线提示,可以说是非常的直观了。
![d27cee483d3ca6d930241a08244319f4.png](https://img-blog.csdnimg.cn/img_convert/d27cee483d3ca6d930241a08244319f4.png)
Image preview
![4961d7a5507e00423a5144075357aa33.png](https://img-blog.csdnimg.cn/img_convert/4961d7a5507e00423a5144075357aa33.png)
预览代码中图片的引用,鼠标移上去就会有小窗展示图片。
![5a8e3dc91f946a201b7790973c0d1213.png](https://img-blog.csdnimg.cn/img_convert/5a8e3dc91f946a201b7790973c0d1213.png)
indent-rainbow
![8fd2976a9f946c075ba9aeee3090b892.png](https://img-blog.csdnimg.cn/img_convert/8fd2976a9f946c075ba9aeee3090b892.png)
看名字就知道了,彩虹缩进,就是把代码不同的缩进展示不同的颜色。
![42c0047ff5f5f9af3f85393e1a61783e.png](https://img-blog.csdnimg.cn/img_convert/42c0047ff5f5f9af3f85393e1a61783e.png)
Indenticator
![cc4a67f121f25fe809e04b0d9c3a9318.png](https://img-blog.csdnimg.cn/img_convert/cc4a67f121f25fe809e04b0d9c3a9318.png)
当你点击一个缩进部分的时候,会出现一条白线来告诉你当前处于的缩进层级,可以更方便的查看代码结构。
![3b4c62e8041c437b87c02d5a2969e442.png](https://img-blog.csdnimg.cn/img_convert/3b4c62e8041c437b87c02d5a2969e442.png)
Trailing Spaces
![04428efb240f3e9c8b5c519aa6bd1458.png](https://img-blog.csdnimg.cn/img_convert/04428efb240f3e9c8b5c519aa6bd1458.png)
把尾随空格显示出来。
![fd37489d58c8e204e67a6a46fa1de5be.png](https://img-blog.csdnimg.cn/img_convert/fd37489d58c8e204e67a6a46fa1de5be.png)
VSCode Great Icons
![bc645feb2fdcaae31c6ae7b34c6508b3.png](https://img-blog.csdnimg.cn/img_convert/bc645feb2fdcaae31c6ae7b34c6508b3.png)
另一个修改文件图标的插件,我用的就是这个,相对于 Material Theme Icons
我更喜欢这个的风格,萝卜青菜可有所爱,大家各取所需。
![084f523a5cf516dc9b9e182e7eb95e68.png](https://img-blog.csdnimg.cn/img_convert/084f523a5cf516dc9b9e182e7eb95e68.png)
功能扩展
编辑器自身的功能还是有限的,为了应付日常开发,不得不安装很多其他的软件进行辅助,不过也可以通过插件的方式引入一些常用的辅助软件,它们的功能可能没有原生的强大,但是基本上已经够用,并且是真的很方便。
AZ AL Dev Tools/AL Code Outline
用来梳理代码结构的插件,安装完后在文件图标里就会多出一个 AL OUTLINE
的选项。
![5e96b056b028799074aef0f621f6ca83.png](https://img-blog.csdnimg.cn/img_convert/5e96b056b028799074aef0f621f6ca83.png)
为了演示我找了一个比较长,比较典型的 vue
文件,请忽略我的代码内容,专注于插件的功能🤣🤣, 可以看到展开第一层是极具 vue
单文件组件特点的template
,script
,style
。逐层展开就可以看到 dom
节点, methods
里面定义的函数等,然后点击就可以快速定位到目标所在位置,妈妈再也不用担心我全局搜啦!
注:它这个里面好像是默认展开的,应该是可以设置是否默认展开,但我没研究过,感兴趣的大佬可以深入调查一下。
Code Runner
运行代码,可以在编辑器中查看结果,前端同学可以在控制台看 console.log
,还有很多其他玩法,具体使用参考此篇文章
👉👉 VSCode插件推荐 | Code Runner: 代码一键运行,支持超过40种语言[2]
![22356e4d1395148115b32b0d9d118bd8.png](https://img-blog.csdnimg.cn/img_convert/22356e4d1395148115b32b0d9d118bd8.png)
CodeIf
![70cb54786fe9fe418921ea8d9d39d9e2.png](https://img-blog.csdnimg.cn/img_convert/70cb54786fe9fe418921ea8d9d39d9e2.png)
在网上看到一句话,在计算机科学中只有两件难事:缓存失效和命名。哈哈哈,确实如此,当开发项目时,命名一直都是一种让人痛苦的事情。
但是命名又是开发过程中一项非常重要的事情,一个好的函数命名,能够让你瞬间明白它实现的功能,所以,每当开发过程中遇到要命名的变量、函数、类时就要冥思苦想,各种翻译。
但是,CodeIf
的出现让这个问题迎刃而解,它通过搜索 GitHub
, Bitbucket
, GitLab
来找到真实的使用变量名,为你提供一些高频使用的词汇。
使用时只需要选中变量名,然后 右键 选择 CodeIf
就可以跳转到网页,显示候选命名。
![52e30cb87d3a72f442d4117c9d94c407.png](https://img-blog.csdnimg.cn/img_convert/52e30cb87d3a72f442d4117c9d94c407.png)
Color Info
![8a5c275a2f421be2fc121736fedf0837.png](https://img-blog.csdnimg.cn/img_convert/8a5c275a2f421be2fc121736fedf0837.png)
查看颜色详细信息的插件,可以小窗口显示颜色值,rgb,hsl,cmyk,hex等等,可以在配置项里添加要展示的信息类型。
![32da4539f307d5325e74f661cd0d686a.png](https://img-blog.csdnimg.cn/img_convert/32da4539f307d5325e74f661cd0d686a.png)
Code Spell Checker
![282a42b9a9c5fb3b99fa5c9c9c216825.png](https://img-blog.csdnimg.cn/img_convert/282a42b9a9c5fb3b99fa5c9c9c216825.png)
检查代码中单词拼写是否正确,当单词不正常的时候,就会在下方出现波浪线进行提示,还可以自定义词典,忽略某个单词的检查等,更多用法参考下面链接。
👉👉 VSCode中插件Code Spell Checker[3]
![deb335870c2803975206535ea6e9dbcd.png](https://img-blog.csdnimg.cn/img_convert/deb335870c2803975206535ea6e9dbcd.png)
Debugger for Chrome
这款插件是专门为前端调试开发的,很方便调试,跟谷歌的控制台是一样的功能,安装以后,无需打开浏览器的控制台就能进行断点调试。对应的还有 Debugger for Firefox
,Debugger for Microsoft Edge
等,其他的我没用过,大家按需安装即可,使用方法应该都大同小异。
![a90842ad898d1c794dc58a0844553a74.png](https://img-blog.csdnimg.cn/img_convert/a90842ad898d1c794dc58a0844553a74.png)
安装完以后,左边会出现一个调试的小图标,打开以后再点击上方小齿轮进行配置。根目录下会自动新建 .vscode
文件夹以及 launch.json
文件,不用管。
![af2f7825057ce443a656835db3e2b85d.png](https://img-blog.csdnimg.cn/img_convert/af2f7825057ce443a656835db3e2b85d.png)
配置文件的具体内容和使用方法可以看这一篇,很详细。
👉👉 VSCode配置 Debugger for Chrome插件[4]
Git History
![34d6a870b5c3c5b16847a074e0418751.png](https://img-blog.csdnimg.cn/img_convert/34d6a870b5c3c5b16847a074e0418751.png)
右键单击文件选择 Git:View File History
来以列表的形式查看所有的提交记录。
GitLens — Git supercharged
这个也是跟 git
相关的插件,功能比上一个要强大一些。上一个插件的演示图片中可以看到我的每一行代码都有上一次 git
提交的记录,那就是这个插件的功劳。
还有其他很多的操作,详情查阅下方链接。
👉👉 VsCode中好用的git源代码管理插件GitLens[5]
![01d9b86f1929aa1488ca46a488568457.png](https://img-blog.csdnimg.cn/img_convert/01d9b86f1929aa1488ca46a488568457.png)
LeetCode
可以在 vscode
中刷算法题的。我自己没用过😣😣
![0a6f9076579527a05df7dde2277c580d.png](https://img-blog.csdnimg.cn/img_convert/0a6f9076579527a05df7dde2277c580d.png)
Local History
![c25ce14ed99e0327f38fee0c23732798.png](https://img-blog.csdnimg.cn/img_convert/c25ce14ed99e0327f38fee0c23732798.png)
这个就很强了,本地代码的修改记录。通常我们写错代码了可以撤销,但是撤销完以后再修改,想要取消撤销就难了。有了这个插件直接看代码的修改记录。还可以跟当前版本进行对比,神器。
安装完以后,项目根目录下会自动生成 .history
的文件夹。代码的修改记录就会放在这里面。记得添加.gitignore
,不然每次提交代码的时候就要遭重了。
![e94da25569ddfc3a79877214d6cf1c3d.png](https://img-blog.csdnimg.cn/img_convert/e94da25569ddfc3a79877214d6cf1c3d.png)
open in browser
在浏览器中打开 html
文件。
![073db640d92c0b50b192f97015812e60.png](https://img-blog.csdnimg.cn/img_convert/073db640d92c0b50b192f97015812e60.png)
安装完以后在目标的 html
文件上右击,选择 open in default browser
即可打开使用浏览器打开文件。
![c0083af6a44f4aa76db1b97688a73c59.png](https://img-blog.csdnimg.cn/img_convert/c0083af6a44f4aa76db1b97688a73c59.png)
Partial Diff
![774a1ef609b5b27dfe3dc60f6cf86031.png](https://img-blog.csdnimg.cn/img_convert/774a1ef609b5b27dfe3dc60f6cf86031.png)
文件比较界的大拿肯定是 Beyond Compare
了,但是它是收费的!那么 Partial Diff
这款神奇的插件就成为了良好的替代品,选中一代码,右键 Select Text for Compare
,选中另外一部分代码,右键Compare Text with Previous Selection
即可。我的是中文的,就更明显了🤣🤣
Postcode
Postman
都听说过吧,这个插件就基本上可以理解为,在 vscode
里面使用 postman
。
![33741998ea5c6e8a2e4cba86d969ba67.png](https://img-blog.csdnimg.cn/img_convert/33741998ea5c6e8a2e4cba86d969ba67.png)
安装完以后左侧菜单会出现一个 小盒子 的图标,点开以后点击 Create Request
就可以正常使用了。
![3a872f89ec71c18713323f45358fed74.png](https://img-blog.csdnimg.cn/img_convert/3a872f89ec71c18713323f45358fed74.png)
Project Manager
![48e6c5fb08c3e943719dfb02eeb931e7.png](https://img-blog.csdnimg.cn/img_convert/48e6c5fb08c3e943719dfb02eeb931e7.png)
项目管理器,适用于经常切换项目的大佬,虽然我平时接触的项目也不多,不过自己搞着玩的工程也不少。有了这个插件,就不用新窗口打开项目了。
安装完以后左侧列表会出现一个 文件夹 的小图标,点开以后就可以进行项目管理了,通常都是操作projects.json
这个文件,点击项目名字就可以切换了,也可以新窗口打开。
![cf2d6810cd0f319811869da36c04cbc9.png](https://img-blog.csdnimg.cn/img_convert/cf2d6810cd0f319811869da36c04cbc9.png)
Quokka.js
![b1774394a8a2cce8b28defb463f13e64.png](https://img-blog.csdnimg.cn/img_convert/b1774394a8a2cce8b28defb463f13e64.png)
实时显示代码的运行结果,使用方法请跳转链接
👉👉 VS Code插件之Quokka.js[6]
![9b3c9affd5475c3135577c216124152d.png](https://img-blog.csdnimg.cn/img_convert/9b3c9affd5475c3135577c216124152d.png)
提升编码效率
如何达到极致的编码效率,当然是能不手写则不手写。下面这些插件就是辅助大家进行一些自动化,这样就可以节省下很多的时间用来摸鱼了。
Auto Import
Typescript
自动导入,其实现在很多的插件基本都内置了这种功能,已经不是必须品了。可能是因为我装了各种奇奇怪怪的插件,我现在想导入什么东西的时候,一大堆的提示,随便选一个都能导进来😂
![a67d10baae365ff0eda53b4e4f532d57.png](https://img-blog.csdnimg.cn/img_convert/a67d10baae365ff0eda53b4e4f532d57.png)
Auto Rename Tag
自动修改标签名,重命名一个开始标签时,自动重命名配对的结束标签。
![c69d61f9f30ea08a15632245be5d478f.png](https://img-blog.csdnimg.cn/img_convert/c69d61f9f30ea08a15632245be5d478f.png)
一下子就对应的全修改掉了,是不是很 nice
。
![8522c5a1117847153f3416458d8bea4e.png](https://img-blog.csdnimg.cn/img_convert/8522c5a1117847153f3416458d8bea4e.png)
change-case
![c4c9768090da204a2bce7f2e455dfa3c.png](https://img-blog.csdnimg.cn/img_convert/c4c9768090da204a2bce7f2e455dfa3c.png)
快速切换变量格式,什么大坨峰,小驼峰,下划线等等,它里面有很多类型。使用方法按 F1(windows)
,输入对应命令即可。
![cdf6310ba778e132439c818df5436e53.png](https://img-blog.csdnimg.cn/img_convert/cdf6310ba778e132439c818df5436e53.png)
CSS Peek
可以通过点击类名迅速定位到样式的定义。不知道是不是我自己的原因,有的时候会失效,需要点击 禁用 ,再点击 启用 就好使了。具体使用方法参考链接
👉👉 cssPeek插件大大提升你的开发效率[7]
![f2ee1f5caa8d946e7b9e52c9ba04a9e6.png](https://img-blog.csdnimg.cn/img_convert/f2ee1f5caa8d946e7b9e52c9ba04a9e6.png)
ECMAScript Quotes Transformer
用于 模板字符串 和 普通字符串拼接 的相互转化,但其实我日常开发基本上都是统一使用模板字符串的,很少有这种互相转化的需求。
![b0d789e1b92f73fe78cf1562161e469f.png](https://img-blog.csdnimg.cn/img_convert/b0d789e1b92f73fe78cf1562161e469f.png)
用法也是非常简单,选中需要转化的行,按 f1
输入命令即可,一般输入 esq
就出现提示了。
![4095d1bab47943291f171321b7ebd0e8.png](https://img-blog.csdnimg.cn/img_convert/4095d1bab47943291f171321b7ebd0e8.png)
embrace
快速的在选中代码两边添加各种引号、括号,不用来回移动光标,不过好像现在市面上的编辑器大多都内置这功能了吧🤨🤨
![7594b4ecba10a272f759b15afc5595f9.png](https://img-blog.csdnimg.cn/img_convert/7594b4ecba10a272f759b15afc5595f9.png)
File Utils
![4e3f23aa7fd15f5ae53d182fe73ca4b0.png](https://img-blog.csdnimg.cn/img_convert/4e3f23aa7fd15f5ae53d182fe73ca4b0.png)
创建,复制,移动,重命名,删除文件和目录的便捷方法,演示图片来自官网。
![2415e56247ad580c5f499a113c6ab4ca.png](https://img-blog.csdnimg.cn/img_convert/2415e56247ad580c5f499a113c6ab4ca.png)
javascript console utils
![40041c617961c2700cbae4028f108f18.png](https://img-blog.csdnimg.cn/img_convert/40041c617961c2700cbae4028f108f18.png)
前端人员的调试少不了 console.log
,那么这就是一款快速生成 console.log
的插件。使用方法非常简单, 选中变量,然后按 ctrl + shift + L
就可以生成了。需要删除的时候按 ctrl + shift + D
即可删除。
![b4608c2fa52ad1c467f339c9fdc77db2.png](https://img-blog.csdnimg.cn/img_convert/b4608c2fa52ad1c467f339c9fdc77db2.png)
json2ts
![ec900b53943cc713ccb6106c0184d308.png](https://img-blog.csdnimg.cn/img_convert/ec900b53943cc713ccb6106c0184d308.png)
自动把 json
格式转成 ts
的类型,复制 json
之后按 ctrl + alt + v
即可。
![02a02edb2e63716999e62cb655e7fb61.png](https://img-blog.csdnimg.cn/img_convert/02a02edb2e63716999e62cb655e7fb61.png)
koroFileHeader
![e8e6577ae7acfec52facbc62c3254b1c.png](https://img-blog.csdnimg.cn/img_convert/e8e6577ae7acfec52facbc62c3254b1c.png)
自动添加 头部注释 和 函数注释 的插件。支持自定义内容,需要在 settings.json
中进行自定义配置。
![bc6dae9b14d549bea3823e7bc21e6f92.png](https://img-blog.csdnimg.cn/img_convert/bc6dae9b14d549bea3823e7bc21e6f92.png)
//自动生成注释插件 文件头部注释
"fileheader.customMade": {
"Author": "一尾流莺",
"Description": "",
"Date": "Do not edit",
"LastEditTime": "Do not edit",
"FilePath": ""
},
//自动生成注释插件 函数注释
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},
复制代码
Mithril Emmet
快速生成代码结构,不过好像新版本 vscode
已经内置了。
![ea41db4dc5f1ed2efb80eb275fae2a43.png](https://img-blog.csdnimg.cn/img_convert/ea41db4dc5f1ed2efb80eb275fae2a43.png)
Path Intellisense
![32c7d39e3dde1cd934241c86f289ff04.png](https://img-blog.csdnimg.cn/img_convert/32c7d39e3dde1cd934241c86f289ff04.png)
引入文件的时候,路径自动补全。
![13a6cb834b3f7dcfb21e03ee2e54c29a.png](https://img-blog.csdnimg.cn/img_convert/13a6cb834b3f7dcfb21e03ee2e54c29a.png)
Npm Intellisense
![7a189864e57f796b37b66fccbeab78cd.png](https://img-blog.csdnimg.cn/img_convert/7a189864e57f796b37b66fccbeab78cd.png)
导入 npm
包的时候,智能提示。
![2bff04200ba9483914fe924e112cbe43.png](https://img-blog.csdnimg.cn/img_convert/2bff04200ba9483914fe924e112cbe43.png)
px to rem & rpx (cssrem)
自动换算单位的插件。
![7f5dcd61277188f8f7007bb60625a03d.png](https://img-blog.csdnimg.cn/img_convert/7f5dcd61277188f8f7007bb60625a03d.png)
很简单,出现提示以后回车即可。
![2bd684197d598042240dad7c078f652f.png](https://img-blog.csdnimg.cn/img_convert/2bd684197d598042240dad7c078f652f.png)
Turbo Console Log
![97fa0fd7c79737d47c10f30ef868f1a5.png](https://img-blog.csdnimg.cn/img_convert/97fa0fd7c79737d47c10f30ef868f1a5.png)
另一个用来生成 console.log
的插件,不同的是,他支持自定义 console.log
的内容,包括文件名,路径,大小等,还可以添加自己喜欢的 emoji
表情,快捷键 ctrl + alt + L
。
![ca137ba877b1eeca5e5d23b011aa7a43.png](https://img-blog.csdnimg.cn/img_convert/ca137ba877b1eeca5e5d23b011aa7a43.png)
代码片段类插件
这一类的插件都很多,但功能都是提供代码片段,作用就是使用几个字符的简写,就可以敲出整段代码。
![f0609fc4b3f2fb81eba0c0ba792a9005.png](https://img-blog.csdnimg.cn/img_convert/f0609fc4b3f2fb81eba0c0ba792a9005.png)
JavaScript (ES6) code snippets
Jest Snippets
HTML Snippets
Vue VSCode Snippets
Vue 3 Snippets
... ...
![b0f8d2a30c8d051e57627dfbcd0a5230.png](https://img-blog.csdnimg.cn/img_convert/b0f8d2a30c8d051e57627dfbcd0a5230.png)
代码格式化
Beautify
用来代码格式化的,但是我好像安装了没怎么用,我一直都是 eslint + prettier
,有正在用的小伙伴可以在评论区发表一下看法,感兴趣的请自己搜索使用方法。
![6e98a8bf4f427dadf3ac10c6d300bd05.png](https://img-blog.csdnimg.cn/img_convert/6e98a8bf4f427dadf3ac10c6d300bd05.png)
ESLint
这个就不用说了吧,代码检查,不符合规范的就会跟你报错,或者警告。具体的规范需要在根目录下新建 .eslintrc.js
文件去配置,也可以用很多大公司现有的规范,太复杂了就不细讲了,贴出教程链接。
👉👉Eslint 超简单入门教程[8]
![78fb27fd8cb81b0c117fb64071ec3779.png](https://img-blog.csdnimg.cn/img_convert/78fb27fd8cb81b0c117fb64071ec3779.png)
Prettier - Code formatter
代码格式化插件,这个插件通常搭配 eslint
使用,也可以单独使用。
![e9fcb8b05f96aad8cb2a32769e4a5771.png](https://img-blog.csdnimg.cn/img_convert/e9fcb8b05f96aad8cb2a32769e4a5771.png)
在根目录下新建 .prettierrc.json
文件,在里面书写自己想要的格式就行了。更具体的配置内容查看链接
👉👉 # vscode 使用Prettier插件格式化配置使用[9]
![009531451c9d8082ee46ecac2b8198b5.png](https://img-blog.csdnimg.cn/img_convert/009531451c9d8082ee46ecac2b8198b5.png)
vetur / volar
![9f43769719f923f8853eec03710de2a7.png](https://img-blog.csdnimg.cn/img_convert/9f43769719f923f8853eec03710de2a7.png)
![d7b560a66232101f7ceb1a38c10c2fd2.png](https://img-blog.csdnimg.cn/img_convert/d7b560a66232101f7ceb1a38c10c2fd2.png)
使用 vue
进行开发的小伙伴都少不了跟它们打交道,volar
是跟 vue3
更配的,功能也能多,由于这两个插件功能过于庞大,就不展开讲了,感兴趣的自行搜索使用。
其他好玩的插件
除了功能性插件,当然还有很多花里胡哨的玩意。下面给大家介绍几款可能对开发影响不大,但是非常好玩的插件。
小霸王
还记得小时候玩的手柄游戏吗?大佬已经给我们出了插件了,不过我还是要友情提醒一句:游戏有风险,摸鱼需谨慎!
![f3567dc4ab6e2592eb86462ddaaeaa76.png](https://img-blog.csdnimg.cn/img_convert/f3567dc4ab6e2592eb86462ddaaeaa76.png)
操作非常简单,安装完左侧会出现游戏手柄图标,点击打开就可以下载游戏进行玩耍。
![ccc5c46e0e809ae5eef5444e1c66c0b6.png](https://img-blog.csdnimg.cn/img_convert/ccc5c46e0e809ae5eef5444e1c66c0b6.png)
Emoji
![1af737e64bf8a4417eb4f5a4d2e17609.png](https://img-blog.csdnimg.cn/img_convert/1af737e64bf8a4417eb4f5a4d2e17609.png)
在代码中添加 emoji
表情,我自己除了写一些注释,console.log
之外,基本没有别的作用,但是挺好玩的,别人看你的代码中各种小表情,也会觉得你是一个可爱的人吧。
它的官方示例里面还可以把 emoji
设为变量名,我可不建议你们这样做。使用方法也是非常的简单,按 f1(windows)
输入 emoji
,可以看到有三个选项,分别是 emoji
表情,markdown
下的 emoji
,还有 unicode
下的 emoji
。选中一个模式回车进入列表,再回车就可以输入到代码中了。
![cc544a647308ca4d4d2d10dde0b20a6c.png](https://img-blog.csdnimg.cn/img_convert/cc544a647308ca4d4d2d10dde0b20a6c.png)
Settings Sync
![69c75b3ef0af338b8e306c6f07a41acc.png](https://img-blog.csdnimg.cn/img_convert/69c75b3ef0af338b8e306c6f07a41acc.png)
可以同步 vscode
配置的插件,由于我没有换过电脑,所以还没亲测,但是网上用的人还是蛮多的。
点个在看支持我吧,转发就更好了