好用到飞起的十款vscode插件🚀(前端篇)

前言

作为一名前端,适当的使用一些插件能让你的开发体验和效率提升数倍,下面就来分享本人使用的前端 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

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

相关推荐
清沫8 小时前
键盘效率提升指南(VSCode+Vim+SurfingKeys)
前端·vim·visual studio code
OLong1 天前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
一眼万年042 天前
每天都在使用的VS Code Copilot Chat 开源啦!
aigc·ai编程·visual studio code
pe7er12 天前
vscode插件Hybrid Mode混合模式不兼容导致vue3项目在vscode爆红、类型推导失效的解决方案
vue.js·visual studio code
是紫焅呢14 天前
I排序算法.go
开发语言·后端·算法·golang·排序算法·学习方法·visual studio code
是紫焅呢15 天前
E结构体基础.go
开发语言·后端·golang·学习方法·visual studio code
是紫焅呢15 天前
F接口基础.go
开发语言·后端·青少年编程·golang·visual studio code
攀登的牵牛花16 天前
🚀【效率利器】Spine动画瘦身秘籍:一键批量PNG To WebP,Atlas自动更新!
前端·visual studio code
是紫焅呢16 天前
C函数基础.go
开发语言·后端·青少年编程·golang·学习方法·visual studio code
是紫焅呢17 天前
D包和模块.go
开发语言·后端·golang·学习方法·visual studio code