Todo Tree 自己的使用详解

        最近遇到过好用的插件 Todo Tree来标记代码,找了网上的资料都讲的不清晰, 所以自己研究了一下,这里讲一下自己的理解. 知其然知其所以然 -->

1.安装

        我这个安装过了,商店搜索点安装就行

2.打开配置

3.添加自己的标签

        在最外层的{} 里添加上自己的设置代码即可:

  //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,
    "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": "#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": "check",
            "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",
        }
    },

看下效果:

这里我重点解释两个成员变量( 其他都好理解 ):

 icon:

         这个是决定 左边标签栏前面的标识, 这个允许的值我没找到全的,也是在网上搜搜之后收集的 

        收集到允许的值有

alert
bug
tag
check
note
flame
versions
unverified

经评论区朋友指导有完整的 icon 取值, 链接如下:

codicon | The icon font for Visual Studio Code

  

        小图还是有水印,看不太清,上个大图:

type:

        这个是颜色填充高亮的范围,在其细节部分有罗列,允许以下的值,感兴趣的可以改着试试, 试了line 和tag 你就知道这个变量的作用了