Vscode TODO.. 注释标记便捷使用方式

下载插件

Todo Tree

修改配置

打开vscode 设置。切换成 setting.json. 加入todo 配置

{
  //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"
    }
  }
}

创建全局代码片段

新建一个全局代码片段，加入一下配置

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"待开发功能": {
		"scope": "javascript,typescript",
		"prefix": "/todo",
		"body": [
			"// TODO $1",
		],
		"description": "Log output to console"
	},
	"存在问题": {
		"scope": "javascript,typescript",
		"prefix": "/todo-bug",
		"body": [
			"// BUG $1",
		],
		"description": "Log output to console"
	},
	"标签": {
		"scope": "javascript,typescript",
		"prefix": "/todo-tag",
		"body": [
			"// TAG $1",
		],
		"description": "Log output to console"
	},
	"完成项": {
		"scope": "javascript,typescript",
		"prefix": "/todo-done",
		"body": [
			"// DONE $1",
		],
		"description": "Log output to console"
	},
	"测试": {
		"scope": "javascript,typescript",
		"prefix": "/todo-test",
		"body": [
			"// TEST $1",
		],
		"description": "Log output to console"
	},
	"更新": {
		"scope": "javascript,typescript",
		"prefix": "/todo-update",
		"body": [
			"// UPDATE $1",
		],
		"description": "Log output to console"
	},
	"标记": {
		"scope": "javascript,typescript",
		"prefix": "/todo-marke",
		"body": [
			"// MARK $1",
		],
		"description": "Log output to console"
	}
}

进行使用

输入 /todo 快捷提示

打开todo tree 控制台，可快速定位标记