机器学习、深度学习、数据分析、大数据、服务端技术栈等等,这几部分都是很全的。可以先看部分(价值超大!!)
本文不做任何编辑器的比较,只是我本人日常使用 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
单文件组件特点的 template
,script
,style
。逐层展开就可以看到 dom
节点, methods
里面定义的函数等,然后点击就可以快速定位到目标所在位置,妈妈再也不用担心我全局搜啦!Code Runner
console.log
,还有很多其他玩法,具体使用参考此篇文章CodeIf
的出现让这个问题迎刃而解,它通过搜索 GitHub
, Bitbucket
, GitLab
来找到真实的使用变量名,为你提供一些高频使用的词汇。CodeIf
就可以跳转到网页,显示候选命名。Debugger for Firefox
,Debugger 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