vscode进行开发，并且比较喜欢折腾
vscode，会到处找这一些好玩的插件，于是越攒越多，今天给大家推荐一下我收藏的 60 多个
vscode插件，据说插件装太多，编辑器会变卡，可能是我的电脑配置还顶得住，目前并没有感觉到卡卡的。
vscode配置，以及插件的不同，部分插件可能在你电脑上不会生效。文中提到的快捷键都是
windows下的，其他操作系统的快捷键请自行了解。
bug更有动力。
Better Comments
安装完以后，插件会默认自带几种颜色的注释，还可以通过 vscode 的配置文件自定义任何颜色，类型的注释。具体的配置方法我给你们找好了。
Bracket Pair Colorizer 2是增强版，具体我没有深入研究具体增强了哪些内容。而且它有挺多的设置项，反正安装完默认的配置已经够用了，感兴趣的同学自行发觉更多有趣玩法吧。
html标签，配对的标签就会出现下划线来指示你谁和谁是一对。
vscode变成中文，像我这种英语弱鸡才会用，大佬们略过。为什么要放在优化外观的分类里，因为我觉得中文比英文好看🧐🧐，安装完重启就行了。
css颜色属性，直观的展示了出来。
Material Theme Palenight High Contrast这一款。安装完了以后点击 设置颜色主题 就可以了。
Material Theme Icons
Material Theme Icons我更喜欢这个的风格，萝卜青菜可有所爱，大家各取所需。
AZ AL Dev Tools/AL Code Outline
AL OUTLINE的选项。
vue文件，请忽略我的代码内容，专注于插件的功能🤣🤣， 可以看到展开第一层是极具
vue单文件组件特点的
templatescriptstyle。逐层展开就可以看到
dom节点，
methods里面定义的函数等，然后点击就可以快速定位到目标所在位置，妈妈再也不用担心我全局搜啦！
Code Runner
console.log，还有很多其他玩法，具体使用参考此篇文章
在计算机科学中只有两件难事:缓存失效和命名
。哈哈哈，确实如此，当开发项目时，命名一直都是一种让人痛苦的事情。
CodeIf的出现让这个问题迎刃而解，它通过搜索
GitHub,
Bitbucket,
GitLab来找到真实的使用变量名，为你提供一些高频使用的词汇。
CodeIf就可以跳转到网页，显示候选命名。
Debugger for FirefoxDebugger for Microsoft Edge等，其他的我没用过，大家按需安装即可，使用方法应该都大同小异。
.vscode文件夹以及
launch.json文件，不用管。
配置文件的具体内容和使用方法可以看这一篇，很详细。
Git History
Git：View File History来以列表的形式查看所有的提交记录。
git相关的插件，功能比上一个要强大一些。上一个插件的演示图片中可以看到我的每一行代码都有上一次
git提交的记录，那就是这个插件的功劳。
LeetCode
vscode中刷算法题的。我自己没用过😣😣
.history的文件夹。代码的修改记录就会放在这里面。记得添加
.gitignore，不然每次提交代码的时候就要遭重了。
html文件。
html文件上右击，选择
open in default browser即可打开使用浏览器打开文件。
Beyond Compare了，但是它是收费的！那么
Partial Diff这款神奇的插件就成为了良好的替代品，选中一代码，右键
Select Text for Compare，选中另外一部分代码，右键
Compare Text with Previous Selection即可。我的是中文的，就更明显了🤣🤣
Postman都听说过吧，这个插件就基本上可以理解为，在
vscode里面使用
postman。
Create Request就可以正常使用了。
projects.json这个文件，点击项目名字就可以切换了，也可以新窗口打开。
Auto Import
Typescript自动导入，其实现在很多的插件基本都内置了这种功能，已经不是必须品了。可能是因为我装了各种奇奇怪怪的插件，我现在想导入什么东西的时候，一大堆的提示，随便选一个都能导进来😂
nice。
F1（windows），输入对应命令即可。
f1输入命令即可，一般输入
esq就出现提示了。
console.log，那么这就是一款快速生成
console.log的插件。使用方法非常简单， 选中变量，然后按
ctrl + shift + L就可以生成了。需要删除的时候按
ctrl + shift + D即可删除。
json格式转成
ts的类型，复制
json之后按
ctrl + alt + v即可。
settings.json中进行自定义配置。
"fileheader.customMade": {
"Author": "一尾流莺",
"Description": "",
"Date": "Do not edit",
"LastEditTime": "Do not edit",
"FilePath": ""
},
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},Mithril Emmet
vscode已经内置了。
npm包的时候，智能提示。
console.log的插件，不同的是，他支持自定义
console.log的内容，包括文件名，路径，大小等，还可以添加自己喜欢的
emoji表情，快捷键
ctrl + alt + L。
-
JavaScript (ES6) code snippets
-
Jest Snippets
-
HTML Snippets
-
Vue VSCode Snippets
-
Vue 3 Snippets
-
… …
用来代码格式化的，但是我好像安装了没怎么用，我一直都是 eslint + prettier，有正在用的小伙伴可以在评论区发表一下看法，感兴趣的请自己搜索使用方法。
.eslintrc.js文件去配置，也可以用很多大公司现有的规范，太复杂了就不细讲了，贴出教程链接。
eslint使用，也可以单独使用。
.prettierrc.json文件，在里面书写自己想要的格式就行了。更具体的配置内容查看链接
vue进行开发的小伙伴都少不了跟它们打交道，
volar是跟
vue3更配的，功能也能多，由于这两个插件功能过于庞大，就不展开讲了，感兴趣的自行搜索使用。
emoji表情，我自己除了写一些注释，
console.log之外，基本没有别的作用，但是挺好玩的，别人看你的代码中各种小表情，也会觉得你是一个可爱的人吧。
emoji设为变量名，我可不建议你们这样做。使用方法也是非常的简单，按
f1（windows）输入
emoji，可以看到有三个选项，分别是
emoji表情，
markdown下的
emoji，还有
unicode下的
emoji。选中一个模式回车进入列表，再回车就可以输入到代码中了。
可以同步 vscode 配置的插件，由于我没有换过电脑，所以还没亲测，但是网上用的人还是蛮多的。
作者：一尾流莺
链接：https://juejin.cn/post/6994327298740600839
今天的文章60 个神级 VS Code 插件分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/7865.html
