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

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
死也不注释7 小时前
【第零章编辑器开发与拓展】
unity·编辑器
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
死也不注释8 小时前
【第一章编辑器开发基础第二节编辑器布局_2GUI中滚动列表(2/4)】
编辑器