【插件】vscode Todo Tree 简介和使用方法

文章目录

- 1、介绍
- 2、常见配置项
- 3、注意点
- - [3.1 自定义标签](#3.1 自定义标签)
  - [3.2 自定义标签的图标](#3.2 自定义标签的图标)
- 4、参考链接

1、介绍

VS Code 的 Todo Tree 是一个非常实用的扩展，用于帮助开发者在项目中快速查找和管理代码中的 TODO、FIXME 或其他自定义标签

官方举例

主要功能

自动扫描任务标签
- 自动扫描工作区中所有文件，查找诸如 TODO、FIXME 等标记。
- 支持自定义标记关键字，如 BUG、NOTE 等。
任务树视图
- 将所有标记内容以树形结构展示，按照文件层次组织，便于快速导航到具体文件和行号
文件和目录过滤
- 支持通过设置过滤文件或目录，避免扫描生成文件、日志文件等无关内容。
自定义外观
- 可自定义标记的颜色、图标，以及不同标签的优先级，使任务分类更加清晰。
代码导航
- 双击树视图中的任务，直接跳转到对应的代码位置。
可搜索标签
- 支持根据任务内容、文件名或标记类型搜索。
动态更新
- 在编辑代码时，Todo Tree 会实时更新任务列表。

2、常见配置项

1、打开vsocde

2、点击左下角设置图标

3、点击 设置 / 也可以快捷键(ctrl + ,)

4、打开 JSON文件

5、copy 配置

json 复制代码

  // Todo Tree 配置信息 开始
  "todo-tree.regex.regex": "((%|#|//|/\\*|<!--|^\\s*\\*)\\s*($TAGS)|^\\s*- \\[ \\])", //这是注释的正则匹配
  "todo-tree.general.tags": [
    "todo", //添加自定义的标签成员,将在下面实现它们的样式
    "bug",
    "tag",
    "done",
    "mark",
    "test",
    "update"
  ],
  "todo-tree.regex.regexCaseSensitive": false, //设置为false允许匹配不考虑大小写
  "todo-tree.highlights.defaultHighlight": { //如果相应变量没赋值就会使用这里的默认值
    "foreground": "#000000", //字体颜色
    "background": "#ffff00", //背景色
    "icon": "check", //标签样式 check 是一个对号的样式
    "rulerColour": "#ffff00", //边框颜色
    "type": "tag", //填充色类型  可在TODO TREE 细节页面找到允许的值 在编辑器中突出显示多少  tag、text
    "iconColour": "#b3ff00", //标签颜色
    "opacity": 0.6, //设置透明度
    "gutterIcon": true //是否显示图标
  },
  "todo-tree.highlights.customHighlight": {
    //todo 		需要做的功能
    "todo": {
      "icon": "alert", //标签样式
      "background": "#c9c552", //背景色
      "rulerColour": "#c9c552", //外框颜色
      "iconColour": "#c9c552", //标签颜色
    },
    //bug		必须要修复的BUG  
    "bug": {
      "background": "#eb5c5c",
      "icon": "bug",
      "rulerColour": "#eb5c5c",
      "iconColour": "#eb5c5c",
    },
    //tag		标签
    "tag": {
      "background": "#38b2f4",
      "icon": "tag",
      "rulerColour": "#38b2f4",
      "iconColour": "#38b2f4",
      "rulerLane": "full"
    },
    //done		已完成
    "done": {
      "background": "#5eec95",
      "icon": "goal",
      "rulerColour": "#5eec95",
      "iconColour": "#5eec95",
    },
    //mark     	标记一下
    "mark": {
      "background": "#f90",
      "icon": "note",
      "rulerColour": "#f90",
      "iconColour": "#f90",
    },
    //test		测试代码
    "test": {
      "background": "#df7be6",
      "icon": "flame",
      "rulerColour": "#df7be6",
      "iconColour": "#df7be6",
    },
    //update  	优化升级点
    "update": {
      "background": "#d65d8e",
      "icon": "versions",
      "rulerColour": "#d65d8e",
      "iconColour": "#d65d8e",
    }
  },
  //todo-tree的配置 到这里结束

3、注意点

3.1 自定义标签

3.2 自定义标签的图标

自定义这个图标，需要去icon 网址里面找到，自己想要的，然后下面这个图的地方粘贴一下icon的名称

自定义icon的图标库地址

找到自己想要的，然后点一下 ，就是下面这个图的样子，然后再复制下面这个图红色框的部分，到 vscode 配置文件的 ToDo tree 的icon 里面即可

4、参考链接

vscode 插件 ToDo Tree 官方网址