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

文章目录

1、介绍

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

官方举例


主要功能

  • 自动扫描任务标签
    • 自动扫描工作区中所有文件,查找诸如 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、参考链接

相关推荐
GBXLUO几秒前
windows的vscode无法通过ssh连接ubuntu的解决办法
vscode·ubuntu
叹一曲当时只道是寻常几秒前
vue中添加原生右键菜单
javascript·vue.js
小磊哥er10 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
木头没有瓜16 分钟前
idea离线安装插件
java·ide·intellij-idea
ᥬ 小月亮21 分钟前
webpack基础
前端·webpack
YongGit40 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学