好用到飞起的十款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

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

相关推荐
晚秋大魔王12 小时前
C# 添加图标
c#·visual studio code
长安第一美人4 天前
Qt中2个.app源文件之间函数与变量的互相调用
开发语言·c++·嵌入式硬件·qt·visual studio code
一梦南柯7 天前
开发新体验:基于Ollama+deepseek打造私有化代码助手
人工智能·visual studio code·deepseek
敲敲敲敲暴你脑袋8 天前
vue3中ref响应式变量为什么script中要用.value,而template模板中不需?
javascript·vue.js·visual studio code
红虾程序员11 天前
CSS盒子模型详解
前端·pycharm·intellij-idea·css3·html5·visual studio code
天机️灵韵12 天前
Continue 与 CodeGPT 插件 的对比分析
ide·visualstudio·intellij-idea·visual studio code
Lorcian15 天前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
Lorcian21 天前
web前端11--伪类与过渡
前端·css·笔记·html5·visual studio code
惜.己23 天前
鸿蒙仓颉环境配置(仓颉SDK下载,仓颉VsCode开发环境配置,仓颉DevEco开发环境配置)
vscode·华为·harmonyos·visual studio code·仓颉
小兵张健24 天前
cursor 使用教程(07) —— 内嵌对话框
程序员·visual studio code·visual studio