VSCODE Todo Tree配置高亮显示

一、安装Todo  Tree

        进入VSCODE点击右侧扩展，搜索Todo  Tree 点击“安装”进行插件的安装，操作界面如下图所示。依次按照1，2，3顺序进行操作即可。

二、插件配置

安装好插件后，进行插件扩展设置，操作顺序依次如下 1，2所示：

进入如下 界面后，点击右上角箭头所示进入settings.json的设置，在文件后方加入下面代码

//todo-tree 标签配置  标签兼容大小写字母(很好的功能!!!)
     "todo-tree.regex.regex": "((%|#|//|<!--|^\\s*\\*)\\s*($TAGS)|^\\s*- \\[ \\])",
     "todo-tree.general.tags": [    
         "todo",  //添加自定义的标签成员,将在下面实现它们的样式
         "bug",
         "tag",
         "done",
         "mark",
         "test",
         "update",
         "difference",
         "ly"
     ],
     "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",  //标签颜色
         },

       //todo 		需要做的功能
       "ywz": {
           "icon": "ywz",          //标签样式
           "background": "#e06e10",  //背景色
           "rulerColour": "#e06e10", //外框颜色
           "iconColour": "#e06e10",  //标签颜色
       },
  
         //g		必须要修复的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",
         }

 最终配置好的文件如下图所示（只截取了部分），在添加上面代码时，注意逗号的添加！！！！

其中画圈部分可以自行添加标签，如我添加了“ly”，“difference”等标签，在添加完自己想要的标签后可对其颜色进行设定，如添加的‘‘ly’标签，在后面进行补充即可，鼠标 光标点击在图1所示位置会出来颜色设置，然后点击颜色区域即可设置成功，具体如下图所示。

三、最终高亮显示

        找到自己想要注释的代码位置，按照平常注释习惯注释，即可出现高亮显示，具体如下图所示，注释的地方和我们刚刚设置的颜色相同，同时在VSCODE左侧也可以很快找到注释的位置，具体也如下面所示。