提高数倍效率的十款vscode插件

提高数倍效率的十款vscode插件

电报联系方式

作为一名前端,适当的使用一些插件能大大提高效率。下面介绍十款非常好用的前端vscode插件。

GitHub Copilot

GitHub Copilot 通过在你编写代码时提供内联建议,为你的工作提供帮助。GitHub Copilot 是 AI 届程序员。 可以使用 GitHub Copilot 在编辑器中获取整行或整个函数的建议。

你只需写下一段注释,Copilot就可以补全剩下的代码、提出改进的建议,为程序员省去大量查找的时间,而且可以保持更高的专注力。

提高数倍效率的十款vscode插件

AWS Toolkit

AWS Toolkit是亚马逊推出的一款插件,能够实现辅助编程的功能,已经集成在VSCode和IntelliJ IDEA等主流的IDE中。相比于Copilot,这款插件个人使用完全免费,这点相比于Copilot来说相对好一点。使用方法和Copilot差不多。
提高数倍效率的十款vscode插件

CSS Navigation

CSS Navigation是一款通过点击类名id标签名即可跳转到具体样式定义的插件。

提高数倍效率的十款vscode插件

Todo Tree

Todo Tree可以帮助你标记你项目中的代码,合理的使用此插件便于你后期优化和排除bug。

提高数倍效率的十款vscode插件

默认的配置是无法达成的,需要执行以下配置:

{
//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 配置结束
}

Draw.io Integration

通过Draw.io Integration你可以无需下载或额外打开网页就能在vscode中使用绘画功能,支持 .drawio.dio.drawio.svg or .drawio.png 等后缀的文件格式。 下图是简单Draw.io Integration画的NestJS流程图
提高数倍效率的十款vscode插件

Import Cost

安装这个插件可以自动显示导入文件大小

提高数倍效率的十款vscode插件

CodeSnap

CodeSnap可以让你快速保存代码的屏幕截图,以便于你与他人分享代码片段。

提高数倍效率的十款vscode插件

安装完后在代码页右击找到并点击CodeSnap📷,选中你要分享的代码片段,在右侧点击那个小圈圈即可将代码以图片的格式保存到本地。

提高数倍效率的十款vscode插件

WakaTime

WakaTime能够记录打代码的时长。

提高数倍效率的十款vscode插件

可以使用github账号登录此网站Dashboard – WakaTime

在这里查看你的API Key,并复制下来

提高数倍效率的十款vscode插件

在vscode中 ctrl + shit + p 输入wakatime 选择 wakatime api key 并将刚刚获取的key粘贴上去然后回车。此时你的编辑器下方会出现时间,点击可前往查看具体时间分布。

提高数倍效率的十款vscode插件

Git Graph

提高数倍效率的十款vscode插件

在此拓展插件下,你可以查看git的具体的commit信息和分支合并信息等。

提高数倍效率的十款vscode插件

Console Ninja

安装节能用,可以在编辑器界面打印日志信息而无需前往浏览器查看。

提高数倍效率的十款vscode插件

开发联系:DEXDAO

 

 

 

© 版权声明

相关文章

暂无评论

暂无评论...