【插件】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、参考链接

相关推荐
一心只读圣贤书3 小时前
解决jinkins的CI、CD使用非root执行sudo命令时无密码权限导致报错的问题
前端
携欢3 小时前
POrtSwigger靶场之CSRF where token validation depends on token being present通关秘籍
前端·csrf
weixin_446260853 小时前
MudBlazor:轻松构建美观的Web应用程序!
前端
谜亚星4 小时前
GSAP学习(五)
前端·动效
code_Bo4 小时前
基于vxe-table进行二次封装
前端·javascript·vue.js
小时前端4 小时前
现代Web认证体系深度解析:从JWT原理到SSO架构设计
前端·面试
UpYoung!4 小时前
无广技术贴!【PDF编辑器】Solid Converter PDF保姆级图文下载安装指南——实用推荐之PDF编辑软件
学习·数学建模·pdf·编辑器·运维开发·个人开发
东方佑4 小时前
基于浏览器的DOCX文件编辑器:实现导入、编辑与导出功能
编辑器
前端一课4 小时前
公开分享一个AI番茄短故事模块技术方案(含代码)
前端
晴殇i4 小时前
为什么现代 JavaScript 代码规范开始建议禁止使用 else ?
前端·javascript·前端框架