史上最全,用60+VsCode插件,打造最强编辑器
本文不做任何编辑器的比较,只是我本人日常使用 vscode
进行开发,并且比较喜欢折腾 vscode
,会到处找这一些好玩的插件,于是越攒越多,今天给大家推荐一下我收藏的 60
多个 vscode
插件,据说插件装太多,编辑器会变卡,可能是我的电脑配置还顶得住,目前并没有感觉到卡卡的。
接下来我会将会以 优化外观 , 功能扩展 , 提升编码效率 , 代码格式化 , 其它插件 几个分类来进行介绍。
一是把它们 分享 给有需要的小伙伴们,二是通过此文向小伙伴们 征集 其它好玩的插件,可以是任何类型的。有想要推荐其它插件的请评论区补充一下,我看到后会添加到文章中并标注出你的 ID 。
注:本文只涉及插件的基本使用,也就是让你知道存在这样一种插件,以及大致了解这个插件可以做什么事,部分插件的详细配置过于复杂,有需要的小伙伴请自行冲浪。根据每个人电脑, vscode
配置,以及插件的不同,部分插件可能在你电脑上不会生效。文中提到的快捷键都是 windows
下的,其他操作系统的快捷键请自行了解。
优化外观
好马用好鞍,好看的编辑器外观,可以提升程序员的编码体验,可以让开发人员的心情变好,让写 bug
更有动力。
Better Comments
一款美化注释的插件,可以根据不同种类的注释,显示不同的颜色,一目了然。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393c6498eb52d2ea68fe289a0da5ba9aecdf3a7a44a0d5f4112193a24f3d68a2c30.jpg)
安装完以后,插件会默认自带几种颜色的注释,还可以通过 vscode
的配置文件自定义任何颜色,类型的注释。具体的配置方法我给你们找好了。
:point_right::point_right: vscode 插件-better comments-代码注释高亮 [1]
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b8365681ce580233d7a7c289b3696e04642186d39974c59c2a37564f967f2d439.jpg)
Bracket Pair Colorizer / Bracket Pair Colorizer 2
这是一个找对象的插件,不是帮你们找对象啊,是帮你找到括号的另一半。目前有两个版本, Bracket Pair Colorizer 2
是增强版,具体我没有深入研究具体增强了哪些内容。而且它有挺多的设置项,反正安装完默认的配置已经够用了,感兴趣的同学自行发觉更多有趣玩法吧。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b643d928c8312a2029de836529c961f6b319c9a61b3db7fa54e5310aee622c670.jpg)
大家可以看到配对的括号是相同的颜色,并且当我选中一个括号以后,会出现一条线帮你找到它对应的另一半括号。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b941e2b383d702bc335409ec25f8e75e68d41a3a2220ce361b4d61edb23e202c1.jpg)
Highlight Matching Tag
这也是一个找对象的插件,找的是标签的对象,看我上一个插件的演示图片中,当我点击一下 html
标签,配对的标签就会出现下划线来指示你谁和谁是一对。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b7013adc9a19052ea977e0a146eee8d05a6f66ef648ebc626650f4f761a805a68.jpg)
Chinese
让你的 vscode
变成中文,像我这种英语弱鸡才会用,大佬们略过。为什么要放在优化外观的分类里,因为我觉得中文比英文好看 ,安装完重启就行了。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b22be99e32ad0aa36765d05504d6dd2dc02aadc913f4931c50e91f8843d8ad4df.jpg)
Color Highlight
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b8c5835c1351ec6e2f6d6db3aaf6963dafe6ba564b42c98449ec1f4eb356a0416.jpg)
看名字就知道了,用于给我们代码中的颜色进行高亮展示的插件。可以看到下图中我设置的 css
颜色属性,直观的展示了出来。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b2e9a9f8ededc2cb30f93ecced0c5204b91ac05da74564b84b0c10e9b5f112472.jpg)
Community Material Theme / Material Theme
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bb486f314529a6ef5b0c3d72608081e9ce4545327249c1881478a71672b0f83ae.jpg)
修改编辑器的主题,内置很多种,我用的是 Material Theme Palenight High Contrast
这一款。安装完了以后点击 设置颜色主题
就可以了。
Material Theme Icons
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bc1375c6b91dabc0adf6bc721bd747930b28a33068142ad41bc10c348dbbd2647.jpg)
设置文件图标的,这个插件的长这个样子,还有很多其它修改文件图标的插件,不喜欢这一款的,大家可以自行找一找。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b0705f3f517655b31f0be23c1ce5638807e9c4d80731edeed5f38a8875e91cd0e.jpg)
Error Gutters
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bdc28f86e86a64a371579046450e7144f4ab684b29500f7b59ecb0ccaf550c317.jpg)
报错的地方都有大红波浪线提示,可以说是非常的直观了。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393894e94ca0c656e6b49bb0028aef0f998b16647d751807fb52b69033d6695c224.jpg)
Image preview
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b530e76fdb85cf38b4f5eb5bbf070bba0ea8879e5a34b88ff984eb59f13c538bc.jpg)
预览代码中图片的引用,鼠标移上去就会有小窗展示图片。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393c584dd673b00a76fa2381d8dae139f3b64f658afbd65df8320307c79c1c82e2f.jpg)
indent-rainbow
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bd71b0ac51bab0ab116eb8df1b520c4f13a4319e49f344ee203f7010c21454452.jpg)
看名字就知道了,彩虹缩进,就是把代码不同的缩进展示不同的颜色。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b63fdcfb6682b5e8d691932c4ffb87b61f42400d27dc20ee48a290b6f44e12965.jpg)
Indenticator
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b44391eb86867ca4c1cb00485429fda7ad26792c650011463af1ab573a0d6eebb.jpg)
当你点击一个缩进部分的时候,会出现一条白线来告诉你当前处于的缩进层级,可以更方便的查看代码结构。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bfdc371314bebd5e473bcf36e94d9811b4d98e1f40a9b14abd8493a7c11fa2610.jpg)
Trailing Spaces
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839371e4b39b136e692909c64febb5967bda55d23408fa1fe64d5d2562705ba0e5ba.jpg)
把尾随空格显示出来。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393b74b1a80da41afae811e21021ad74eec9b78075ffe415b90c88d2b0d5b2f476a.jpg)
VSCode Great Icons
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b195f183a87db9309968d102434fd9341b2ebefbb743884be32e249a8fb7fe94b.jpg)
另一个修改文件图标的插件,我用的就是这个,相对于 Material Theme Icons
我更喜欢这个的风格,萝卜青菜可有所爱,大家各取所需。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983937a50d4f244ef2766f8fc8d33e18b665a28c39ba8776853a3f1d75c36373c8643.jpg)
功能扩展
编辑器自身的功能还是有限的,为了应付日常开发,不得不安装很多其他的软件进行辅助,不过也可以通过插件的方式引入一些常用的辅助软件,它们的功能可能没有原生的强大,但是基本上已经够用,并且是真的很方便。
AZ AL Dev Tools/AL Code Outline
用来梳理代码结构的插件,安装完后在文件图标里就会多出一个 AL OUTLINE
的选项。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be7986a2d5826a4119c52f1cfdbba61c290e57b8f2377833a64719f781057aa8e.jpg)
为了演示我找了一个比较长,比较典型的 vue
文件,请忽略我的代码内容,专注于插件的功能 , 可以看到展开第一层是极具 vue
单文件组件特点的 template
, script
, style
。逐层展开就可以看到 dom
节点, methods
里面定义的函数等,然后点击就可以快速定位到目标所在位置,妈妈再也不用担心我全局搜啦!
注:它这个里面好像是默认展开的,应该是可以设置是否默认展开,但我没研究过,感兴趣的大佬可以深入调查一下。
Code Runner
运行代码,可以在编辑器中查看结果,前端同学可以在控制台看 console.log
,还有很多其他玩法,具体使用参考此篇文章
:point_right::point_right: VSCode插件推荐 | Code Runner: 代码一键运行,支持超过40种语言 [2]
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393b5145f305537550a2fed654e98d5836158ceb069558bd52eab74838adfcc0dd6.jpg)
CodeIf
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b787035af33ad8c7dcc91a74a546a3dc6d81687f93fa084c542683fb7a39c22ea.jpg)
在网上看到一句话, 在计算机科学中只有两件难事:缓存失效和命名 。哈哈哈,确实如此,当开发项目时,命名一直都是一种让人痛苦的事情。
但是命名又是开发过程中一项非常重要的事情,一个好的函数命名,能够让你瞬间明白它实现的功能,所以,每当开发过程中遇到要命名的变量、函数、类时就要冥思苦想,各种翻译。
但是, CodeIf
的出现让这个问题迎刃而解,它通过搜索 GitHub
, Bitbucket
, GitLab
来找到真实的使用变量名,为你提供一些高频使用的词汇。
使用时只需要选中变量名,然后 右键
选择 CodeIf
就可以跳转到网页,显示候选命名。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b9da6496779fed5a61f42d501c96cd20aefbf51479193d55e8d9ba0f0315de597.jpg)
Color Info
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b076294811277c4f61399692a5ce3f70c637ded8224bed03988593d53d5c76af5.jpg)
查看颜色详细信息的插件,可以小窗口显示颜色值,rgb,hsl,cmyk,hex等等,可以在配置项里添加要展示的信息类型。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bfd1a2d73b9b41c9ea0d89fe821e8111a9e381d6d05af2c7119a1118d8786238f.jpg)
Code Spell Checker
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229beec6038a721ec3934346f969f371722a41671c2798f2b75d7a37b2614b41eaf5.jpg)
检查代码中单词拼写是否正确,当单词不正常的时候,就会在下方出现波浪线进行提示,还可以自定义词典,忽略某个单词的检查等,更多用法参考下面链接。
:point_right::point_right: VSCode中插件Code Spell Checker [3]
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b472cea21781cbe6f42c5051d631f1fbfefb436dcae54d1e9a320d705c347655a.jpg)
Debugger for Chrome
这款插件是专门为前端调试开发的,很方便调试,跟谷歌的控制台是一样的功能,安装以后,无需打开浏览器的控制台就能进行断点调试。对应的还有 Debugger for Firefox
, Debugger for Microsoft Edge
等,其他的我没用过,大家按需安装即可,使用方法应该都大同小异。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983931526aff441330092927d7be8ef38c6cd28643aa41c34528228bfddf1ebad6834.jpg)
安装完以后,左边会出现一个调试的小图标,打开以后再点击上方小齿轮进行配置。根目录下会自动新建 .vscode
文件夹以及 launch.json
文件,不用管。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393ad2a39cacd6b62b2657a102cf143dce7886ae283842cca58f9e223ef13e57409.jpg)
配置文件的具体内容和使用方法可以看这一篇,很详细。
:point_right::point_right: VSCode配置 Debugger for Chrome插件 [4]
Git History
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b44c7e410b5e5f744ec02d6ee1d973647f96f499f4c6452bdbb12c3cb6aa97df7.jpg)
右键单击文件选择 Git:View File History
来以列表的形式查看所有的提交记录。
GitLens — Git supercharged
这个也是跟 git
相关的插件,功能比上一个要强大一些。上一个插件的演示图片中可以看到我的每一行代码都有上一次 git
提交的记录,那就是这个插件的功劳。
还有其他很多的操作,详情查阅下方链接。
:point_right::point_right: VsCode中好用的git源代码管理插件GitLens [5]
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983930466720ec68aa8605927a252e9b610b6199e2305a4d87364de71b59f32c48273.jpg)
LeetCode
可以在 vscode
中刷算法题的。我自己没用过:persevere::persevere:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b8091f86d3b0dc7a8b8d4aa87549a797e9a001e442040514aa5d45cc91a2531e8.jpg)
Local History
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b82ff76a484a472f4630be37f3636ab6447908448b05733bb6aefe76b2aa76474.jpg)
这个就很强了,本地代码的修改记录。通常我们写错代码了可以撤销,但是撤销完以后再修改,想要取消撤销就难了。有了这个插件直接看代码的修改记录。还可以跟当前版本进行对比,神器。
安装完以后,项目根目录下会自动生成 .history
的文件夹。代码的修改记录就会放在这里面。记得添加 .gitignore
,不然每次提交代码的时候就要遭重了。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b83cd7d0588f847ffb215c2fa86919d00db04f157875e4e5c04706655c1eb8b2e.jpg)
open in browser
在浏览器中打开 html
文件。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839391bd5a0e4b138b550c9b413ddb49b52ff0872f56e71a00670b65f20c99a14389.jpg)
安装完以后在目标的 html
文件上右击,选择 open in default browser
即可打开使用浏览器打开文件。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bf31322e8016fb3fac19988ceba1c67cbcc023b7cf5a2d18738ce9df4b7e8e568.jpg)
Partial Diff
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bb820d0d98a3278c4e115305c17b3694f0dd49c50d9035e1489b581d72bfd6cd6.jpg)
文件比较界的大拿肯定是 Beyond Compare
了,但是它是收费的!那么 Partial Diff
这款神奇的插件就成为了良好的替代品,选中一代码,右键 Select Text for Compare
,选中另外一部分代码,右键 Compare Text with Previous Selection
即可。我的是中文的,就更明显了
Postcode
Postman
都听说过吧,这个插件就基本上可以理解为,在 vscode
里面使用 postman
。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b1ecc4c7b0b855c763c2a557305f1ab433b0e409a7d1e4d7c4cbab16aa9847624.jpg)
安装完以后左侧菜单会出现一个 小盒子
的图标,点开以后点击 Create Request
就可以正常使用了。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983930c1849547b1aa7921f592404e4d00b03f29dbc5d0f9de1e9ca5e0eb17af7d149.jpg)
Project Manager
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bc559dda1a5396207f3e0b55ca485fec16f4c964000b5a5c0d1c7a5e822305365.jpg)
项目管理器,适用于经常切换项目的大佬,虽然我平时接触的项目也不多,不过自己搞着玩的工程也不少。有了这个插件,就不用新窗口打开项目了。
安装完以后左侧列表会出现一个 文件夹
的小图标,点开以后就可以进行项目管理了,通常都是操作 projects.json
这个文件,点击项目名字就可以切换了,也可以新窗口打开。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b2a80256b4e12f830ac8b52ce1a49be6154c081a59e02244a3663a70f5f907760.jpg)
Quokka.js
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839371f556e12b1c1a95ff0beeecc95a7767fd797ea928259f653df6931dd79f56e0.jpg)
实时显示代码的运行结果,使用方法请跳转链接
:point_right::point_right: VS Code插件之Quokka.js [6]
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b1b03d010cfd797abd573c90360ea1ca8a306d1716fd806608529a6a7ce41c51b.jpg)
提升编码效率
如何达到极致的编码效率,当然是能不手写则不手写。下面这些插件就是辅助大家进行一些自动化,这样就可以节省下很多的时间用来摸鱼了。
Auto Import
Typescript
自动导入,其实现在很多的插件基本都内置了这种功能,已经不是必须品了。可能是因为我装了各种奇奇怪怪的插件,我现在想导入什么东西的时候,一大堆的提示,随便选一个都能导进来:joy:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b28218b0081ce5ce6d2f44fd4dda66764c6d4b449e34e76f56a7c82d469c383d4.jpg)
Auto Rename Tag
自动修改标签名,重命名一个开始标签时,自动重命名配对的结束标签。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393084de4882fe383f9d33c242c4daaddb80504aa1241eabc4698c2e64f7c632712.jpg)
一下子就对应的全修改掉了,是不是很 nice
。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839361d2a9a69df4e9fee08ff4266251ddb26e3e6164b6de9ce2cf96782c8bb520af.jpg)
change-case
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bf4e13de11b1f1f0bb747617ed01e5cffed99ce3b1c9f134de451f28ed416b2cb.jpg)
快速切换变量格式,什么大坨峰,小驼峰,下划线等等,它里面有很多类型。使用方法按 F1(windows)
,输入对应命令即可。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b59c9dc8b3bfbffe1325789f98231a084130f0bb46dbe4d846b16a502b8bf2227.jpg)
CSS Peek
可以通过点击类名迅速定位到样式的定义。不知道是不是我自己的原因,有的时候会失效,需要点击 禁用 ,再点击 启用 就好使了。具体使用方法参考链接
:point_right::point_right: cssPeek插件大大提升你的开发效率 [7]
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393b56fe01cc11dc05d171842318daddddbac2d064895e5ea720544b824df800853.jpg)
ECMAScript Quotes Transformer
用于 模板字符串 和 普通字符串拼接 的相互转化,但其实我日常开发基本上都是统一使用模板字符串的,很少有这种互相转化的需求。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b2fe17710975d09290cc98677814ec1dc4c0fad311f22bb34ccfc3c8ab9c13469.jpg)
用法也是非常简单,选中需要转化的行,按 f1
输入命令即可,一般输入 esq
就出现提示了。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b2a0aff8305d2edc5f345f720220b9f19a9518cb32bbec422d9bad5a2c71db1ce.jpg)
embrace
快速的在选中代码两边添加各种引号、括号,不用来回移动光标,不过好像现在市面上的编辑器大多都内置这功能了吧
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b9af3413bbab5e4e80fcc5bad5d7fef705b71bc1f265176e0165891a193a744bb.jpg)
File Utils
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be315a2ac4b5bafd61978cc14f0a1395cc24e5f5f252531abb12a6bb32d309394.jpg)
创建,复制,移动,重命名,删除文件和目录的便捷方法,演示图片来自官网。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b5dc0bb18840cdde1479f3489d2fe800edb9e90e4e5d1bdaa48cb02f867061267.jpg)
javascript console utils
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393fbc91db5f42c95edadbf985878a0bc8ef16e9bff96ecf76e15e23437bebbb3af.jpg)
前端人员的调试少不了 console.log
,那么这就是一款快速生成 console.log
的插件。使用方法非常简单, 选中变量,然后按 ctrl + shift + L
就可以生成了。需要删除的时候按 ctrl + shift + D
即可删除。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4ba3767f96aa2b9b7e0fd14fbf07f28f556157916778a2cb5576af498b864810fc.jpg)
json2ts
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983938e6b038fa3b92e594de40ab1e4def609b98249eb9ac2bf402c826dc7842622f0.jpg)
自动把 json
格式转成 ts
的类型,复制 json
之后按 ctrl + alt + v
即可。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b8a1a37949cda5c94402bf0cff0fa65aac37d4730613bd5d618f81a30d0dcc155.jpg)
koroFileHeader
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b3c8f2c8beb4ad0047affe63c064f184e9418ba85981cc5ddc63961c8fba9949a.jpg)
自动添加 头部注释
和 函数注释
的插件。支持自定义内容,需要在 settings.json
中进行自定义配置。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b6ff98f8b970666dcb8e7a39358df0b9972cd54f1dc55ce36b2eaf462f76f31c5.jpg)
//自动生成注释插件 文件头部注释
"fileheader.customMade": {
"Author": "一尾流莺",
"Description": "",
"Date": "Do not edit",
"LastEditTime": "Do not edit",
"FilePath": ""
},
//自动生成注释插件 函数注释
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},
复制代码
Mithril Emmet
快速生成代码结构,不过好像新版本 vscode
已经内置了。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b502b8cfc782d04b0dc309c210d3243ece635b9718b87a0cf6181e9b08f961cb7.jpg)
Path Intellisense
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bfdc58b02c134162c3b7c3e22e1b7590e4775caa4a5e71a24dc05adbcaa1bf705.jpg)
引入文件的时候,路径自动补全。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b05555123315cf93ff0ff83674dfa78caf0348073a45bdf517dc6b27d41463573.jpg)
Npm Intellisense
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bcaf09d7ba7a464910e46db2621b1c3b115528f435c2d5a79e3d34f4e8c69323d.jpg)
导入 npm
包的时候,智能提示。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983935d5e33807c3621337ef939cf672a471545e5dae16a357c0fa0f6b5e188aded0e.jpg)
px to rem & rpx (cssrem)
自动换算单位的插件。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983937185b98c9d6878b467cfd3cfd54f541b7f0d9e13d0f1886626f2088f221f2f87.jpg)
很简单,出现提示以后回车即可。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b42661837ebf7e238461dce3cee4cd38309e084874f2f82dcf391f6f7dbb2b961.jpg)
Turbo Console Log
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b77cfc13b82ef13ae9b6c5e034e024aff4948d8f5bf203aebb54f03dd4c6080c3.jpg)
另一个用来生成 console.log
的插件,不同的是,他支持自定义 console.log
的内容,包括文件名,路径,大小等,还可以添加自己喜欢的 emoji
表情,快捷键 ctrl + alt + L
。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393ba9b71471d89407173833e57f91bac5e8dbcba14a0ab33d3701a20912d07fc71.jpg)
代码片段类插件
这一类的插件都很多,但功能都是提供代码片段,作用就是使用几个字符的简写,就可以敲出整段代码。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393832a5b1d996c7ac82f28d0970756ae51dc913a2067fc6c1044105a726f783709.jpg)
-
JavaScript (ES6) code snippets
-
Jest Snippets
-
HTML Snippets
-
Vue VSCode Snippets
-
Vue 3 Snippets
-
... ...
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393b52ca3a3b9a631169c05a90dea1209a59dbf9e9e94c04f3cf76932e65e29ca8c.jpg)
代码格式化
Beautify
用来代码格式化的,但是我好像安装了没怎么用,我一直都是 eslint + prettier
,有正在用的小伙伴可以在评论区发表一下看法,感兴趣的请自己搜索使用方法。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839341a15b9cac46cceee235e95ce62e712b08a5df74ae7d0a87f103620525cb6525.jpg)
ESLint
这个就不用说了吧,代码检查,不符合规范的就会跟你报错,或者警告。具体的规范需要在根目录下新建 .eslintrc.js
文件去配置,也可以用很多大公司现有的规范,太复杂了就不细讲了,贴出教程链接。
:point_right::point_right: Eslint 超简单入门教程 [8]
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983932e9eb00de3b975292f2360edb69659505c3e9a73b200bcfc3bf7d5ddf22f8986.jpg)
Prettier - Code formatter
代码格式化插件,这个插件通常搭配 eslint
使用,也可以单独使用。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983935e23c0e14ad5fa66e57217535d372ca01a83c3ed086dd67ac79a153d2f51c7e6.jpg)
在根目录下新建 .prettierrc.json
文件,在里面书写自己想要的格式就行了。更具体的配置内容查看链接
:point_right::point_right: \# vscode 使用Prettier插件格式化配置使用 [9]
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bf0699baf66947ce929c55b61fd59d03c1233cf90c8fe3b538a3d1bba0e02fd08.jpg)
vetur / volar
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b4db62f4e37f9b32d56655ae0b667d11c7c8645b55aa22b15abb52ceb5362d044.jpg)
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bd7182d5ab1b111400a9aa93382827c33c10d1821377c5963a325d84ec245bf39.jpg)
使用 vue
进行开发的小伙伴都少不了跟它们打交道, volar
是跟 vue3
更配的,功能也能多,由于这两个插件功能过于庞大,就不展开讲了,感兴趣的自行搜索使用。
其他好玩的插件
除了功能性插件,当然还有很多花里胡哨的玩意。下面给大家介绍几款可能对开发影响不大,但是非常好玩的插件。
小霸王
还记得小时候玩的手柄游戏吗?大佬已经给我们出了插件了,不过我还是要友情提醒一句:游戏有风险,摸鱼需谨慎!
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b9cf102d673b371ac44f4f0b1913f001b90a2b2fe739e061614e4a8ad4f924344.jpg)
操作非常简单,安装完左侧会出现游戏手柄图标,点击打开就可以下载游戏进行玩耍。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af9839350376e6c95b6c224ecd913a723164db6c6a26bb6e4ea788950a658a9796a8393.jpg)
Emoji
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983936ed91251ecfbad95fe828576882e2a0008553acae2c59185e9b77f1a28254349.jpg)
在代码中添加 emoji
表情,我自己除了写一些注释, console.log
之外,基本没有别的作用,但是挺好玩的,别人看你的代码中各种小表情,也会觉得你是一个可爱的人吧。
它的官方示例里面还可以把 emoji
设为变量名,我可不建议你们这样做。使用方法也是非常的简单,按 f1(windows)
输入 emoji
,可以看到有三个选项,分别是 emoji
表情, markdown
下的 emoji
,还有 unicode
下的 emoji
。选中一个模式回车进入列表,再回车就可以输入到代码中了。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bbaee89bfecc9b2f3b6f07eaf21898957eefea1585f2e92ee8b65cc2401694f8b.jpg)
Settings Sync
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393a84188173bb7d526005e5d74f604bb0e3ece5a1039703bd45a0df867b0a39022.jpg)
可以同步 vscode
配置的插件,由于我没有换过电脑,所以还没亲测,但是网上用的人还是蛮多的。
彩虹屁插件
参考
感觉有用的小伙伴请点个:+1:,有其它插件分享的请在评论区留言,谢谢啦!
关于本文
来源:一尾流莺
http://juejin.cn/post/6994327298740600839
推荐阅读:
VUE中文社区
编程技巧 · 行业秘闻 · 技术动向
- 史上最全,用60 VsCode插件,打造最强编辑器
- 纯 CSS 实现十个还不错的 Loading 效果
- 前端摸鱼神器,一小时打卡下班!
- 前端工程化&掌握Webpack极速配置技巧
- 如何修改 node_modules 里的文件
- 万字长文:分享前端性能优化知识体系
- 大文件的分片上传、断点续传及其相关拓展实践
- 58个面向 Web 开发人员的JavaScript技巧汇总
- 我的第一次webpack优化,首屏渲染从9s到1s
- Vue3 对比Vue2,你找到哪些变化?
- 手摸手教你封装几个Vue3中很有用的组合式API
- 10 个“哇塞”的 Web 资源,收藏等于学会~
- 梳理 Vue3 相比于 Vue2 的有哪些 “与众不同” ?
- 22 个用于网站设计的 CSS 库
- 82个Web开发者工具汇总
- 收藏 | 70道Vue相关面试题,一篇文章打包带走
- 前端架构师神技,三招统一团队代码风格
- 响应式布局,你需要知道的一切
- 画了5张图,助你轻松打败动态权限路由!!
- 前端人一定不能错过这个神器,告别切图,一键成稿!