作为一名前端，适当的使用一些插件能让你的开发体验和效率提升数倍,下面就来分享本人使用的前端 VSCode 插件！
1.GitHub Copilot
GitHub Copilot 通过在你编写代码时提供内联建议，为你的工作提供帮助。GitHub Copilot 是 AI 届程序员。 可以使用 GitHub Copilot 在编辑器中获取整行或整个函数的建议。
如果你是高校学生，那么你可以申请github学生认证，由此可以免费获取此插件免费使用权，这里附上学生认证地址 点击前往
你只需写下一段注释，Copilot就可以补全剩下的代码、提出改进的建议，为程序员省去大量查找的时间，而且可以保持更高的专注力。
以下是简单使用Copilot插件生成的一个冒泡排序函数 
2.AWS Toolkit
AWS Toolkit是亚马逊推出的一款插件，能够实现辅助编程的功能，已经集成在VSCode和IntelliJ IDEA等主流的IDE中。相比于Copilot，这款插件个人使用完全免费，这点相比于Copilot来说相对好一点。使用方法和Copilot差不多。
3.CSS Navigation
CSS Navigation是一款通过点击类名、id、标签名即可跳转到具体样式定义的插件，以下是简单使用 
、
4.Todo Tree
Todo Tree可以帮助你标记你项目中的代码，合理的使用此插件便于你后期优化和排除bug 
想要获得上图的效果，默认的配置是无法达成的，在这里附上我的配置
js
复制代码
{
//todo-tree 标签配置 标签兼容大小写字母(很好的功能!!!)
"todo-tree.regex.regex": "((%|#|//|<!--|^\s*\*)\s*($TAGS)|^\s*- \[ \])",
"todo-tree.general.tags": [
"todo", //添加自定义的标签成员,将在下面实现它们的样式
"bug",
"tag",
"done",
"mark",
"test",
"update",
"fixme"
],
"todo-tree.regex.regexCaseSensitive": false,
"todo-tree.highlights.defaultHighlight": {
//如果相应变量没赋值就会使用这里的默认值
"foreground": "black", //字体颜色
"background": "yellow", //背景色
"icon": "check", //标签样式 check 是一个对号的样式
"rulerColour": "yellow", //边框颜色
"type": "tag", //填充色类型 可在TODO TREE 细节页面找到允许的值
"iconColour": "yellow" //标签颜色
},
"todo-tree.highlights.customHighlight": {
//todo 需要做的功能
"todo": {
"icon": "alert", //标签样式
"background": "#F9D569", //背景色
"rulerColour": "#F9D569", //外框颜色
"iconColour": "#F9D569" //标签颜色
},
//bug 必须要修复的BUG
"bug": {
"background": "#E36777",
"icon": "bug",
"rulerColour": "#E36777",
"iconColour": "#E36777"
},
//tag 标签
"tag": {
"background": "#9FD8FF",
"icon": "tag",
"rulerColour": "#9FD8FF",
"iconColour": "#9FD8FF",
"rulerLane": "full"
},
//done 已完成的功能点
"done": {
"background": "#5eec95",
"icon": "verified",
"rulerColour": "#5eec95",
"iconColour": "#5eec95"
},
//mark 需要注意的地方
"mark": {
"background": "#f90",
"icon": "note",
"rulerColour": "#f90",
"iconColour": "#f90"
},
//test 需要测试的地方
"test": {
"background": "#C39EE2",
"icon": "flame",
"rulerColour": "#C39EE2",
"iconColour": "#C39EE2"
},
//update 需要升级的地方
"update": {
"background": "#F690AA",
"icon": "sync",
"rulerColour": "#F690AA",
"iconColour": "#F690AA"
},
//fixme 需要修复的问题
"fixme": {
"background": "#FFB599",
"icon": "tools",
"rulerColour": "#FFB599",
"iconColour": "#FFB599"
}
},
"todo-tree.tree.expanded": true,
"todo-tree.tree.buttons.export": true
//todo-tree 配置结束
}
5.Draw.io Integration
通过Draw.io Integration你可以无需下载或额外打开网页就能在vscode中使用绘画功能，支持 .drawio, .dio, .drawio.svg or .drawio.png 等后缀的文件格式。 下图是我简单Draw.io Integration画的NestJS流程图 
6.Import Cost
如图，安装此插件可以自动显示导入文件大小 
7.CodeSnap
CodeSnap可以让你快速保存代码的屏幕截图，以便于你与他人分享代码片段。 
安装完后在代码页右击找到并点击CodeSnap📷，选中你要分享的代码片段，在右侧点击那个小圈圈即可将代码以图片的格式保存到本地。 
8.WakaTime
WakaTime能够记录打代码的时长，方便自己了解自身摸鱼时间（咳咳，不对工作时间） 
你可以使用github账号登录此网站 Dashboard - WakaTime 
在这里查看你的API Key，并复制下来 
在vscode中 ctrl + shit + p 输入wakatime 选择 wakatime api key 并将刚刚获取的key粘贴上去然后回车（如图） 
此时你的编辑器下方会出现时间，点击可前往查看具体时间分布 
9.Git Graph
在此拓展插件下，你可以查看git的具体的commit信息和分支合并信息等 
10.Console Ninja
安装即用，可以在编辑器界面打印日志信息而无需前往浏览器查看 
这里给大家分享一份Python全套学习资料，包括学习路线、软件、源码、视频、面试题等等，都是我自己学习时整理的，希望可以对正在学习或者想要学习Python的朋友有帮助！
CSDN大礼包：全网最全《全套Python学习资料》免费分享🎁
😝有需要的小伙伴，可以点击下方链接免费领取或者V扫描下方二维码免费领取🆓
1️⃣零基础入门
① 学习路线
对于从来没有接触过Python的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。
② 路线对应学习视频
还有很多适合0基础入门的学习视频，有了这些视频，轻轻松松上手Python~
③练习题
每节视频课后，都有对应的练习题哦，可以检验学习成果哈哈！
因篇幅有限，仅展示部分资料
2️⃣国内外Python书籍、文档
① 文档和书籍资料
3️⃣Python工具包+项目源码合集
①Python工具包
学习Python常用的开发软件都在这里了！每个都有详细的安装教程，保证你可以安装成功哦！
②Python实战案例
光学理论是没用的，要学会跟着一起敲代码，动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。100+实战案例源码等你来拿！
③Python小游戏源码
如果觉得上面的实战案例有点枯燥，可以试试自己用Python编写小游戏，让你的学习过程中增添一点趣味！
4️⃣Python面试题
我们学会了Python之后，有了技能就可以出去找工作啦！下面这些面试题是都来自阿里、腾讯、字节等一线互联网大厂，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。
5️⃣Python兼职渠道
而且学会Python以后，还可以在各大兼职平台接单赚钱，各种兼职渠道+兼职注意事项+如何和客户沟通，我都整理成文档了。
上述所有资料 ⚡️ ，朋友们如果有需要 📦《全套Python学习资料》的，可以扫描下方二维码免费领取 🆓
😝有需要的小伙伴，可以点击下方链接免费领取或者V扫描下方二维码免费领取🆓
扫一扫
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
