前语

作为一名前端，适当的运用一些插件能让你的开发体会和效率提高数倍,下面就来共享自己运用的前端 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

想要获得上图的效果，默许的装备是无法达到的，在这儿附上我的装备

{
     //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.svgor.drawio.png等后缀的文件格式。下图是我简略Draw.io Integration画的NestJS流程图