[VsCode]工具推荐TODO-TREE

介绍

在软件开发过程中，我们通常会在代码中标记一些TODO、FIXME、NOTE等待办事项或注释。然而，随着项目规模的增长，这些标记可能会变得分散且难以管理。为了更好地跟踪和管理待办事项，我推荐使用VS Code插件 - todo-tree。

todo-tree是一个强大的TODO列表管理工具，它可以帮助我们更好地组织和查看代码中的待办事项。本文将介绍todo-tree插件的使用原因，并指导您如何下载并在您的开发框架中进行配置。

使用原因
todo-tree插件提供了以下优点：

• 可视化的待办事项列表：todo-tree会扫描您的代码，并将所有待办事项以可视化列表的形式展示在侧边栏中。这使您可以轻松地查看和导航到代码中的待办事项，而无需手动搜索。
• 支持自定义标签：todo-tree支持自定义待办事项标签，例如TODO、FIXME、NOTE等。您可以根据项目的需要定义自己的标签，以更好地符合您的工作流程。
• 智能过滤和排序：todo-tree提供了强大的过滤和排序功能，可以帮助您快速筛选和定位特定类型的待办事项。您可以根据关键字、标签、文件路径等条件进行过滤，并按照不同的排序方式（如文件、标签、优先级等）对待办事项进行排序。
• 快速导航和编辑：todo-tree允许您通过单击列表中的待办事项来快速导航到相应的代码位置。您可以直接在todo-tree面板中编辑待办事项，轻松地更新状态、添加备注或修改内容。
  

---

下载和配置

以下是下载和配置todo-tree插件的步骤：

1. 打开VS Code编辑器，并进入扩展面板（快捷键：Ctrl+Shift+X）。
2. 在搜索框中输入"todo-tree"并点击安装按钮，等待插件安装完成。
3. 安装完成后，重新启动VS Code。
4. 在VS Code的侧边栏中，点击todo-tree图标打开插件面板。
5. 在todo-tree面板中，您将看到一个初始的待办事项列表。您可以根据需要进行自定义标签、过滤和
6. 打开您的项目文件夹，并在编辑器中浏览代码。todo-tree将自动扫描您的代码，
7. 单击待办事项列表中的项，即可跳转到相应的代码位置。
8. 若要编辑待办事项，您可以在todo-tree面板中直接对其进行修改。
9. 通过以上步骤，您已成功下载并配置了todo-tree插件，现在可以更方便地管理和跟踪代码中的待办事项了！

配置代码

这发下我自己再用的配色，打开setting.json新增如下代码

//todo-tree settings
"todo-tree.regex.regex": "((//|#|<!--|;|/\\*|^)\\s*($TAGS):|^\\s*- \\[ \\])",
    "todo-tree.general.tags": [
        "#TODO",
        "#FIXME",
        "#TAG",
        "#NOTE"
    ],
    "todo-tree.regex.regexCaseSensitive": false,
    "todo-tree.highlights.defaultHighlight": {
        "foreground": "#ffffff",
        "background": "#FFC300",
        "icon": "check",
        "rulerColour": "#FFC300",
        "type": "tag",
        "iconColour": "#FFC300"
    },
    "todo-tree.highlights.customHighlight": {
        "#TODO": {
            "foreground": "#003cff",
            "background": "#FFC300",
            "rulerColour": "#FFC300",
            "iconColour": "#FFC300"
        },
        "#FIXME": {
            "foreground": "#57dbf5",
            "background": "#F57257",
            "icon": "beaker",
            "rulerColour": "#F57257",
            "iconColour": "#F57257",
        },
        "#TAG": {
            "foreground": "#000000",
            "background": "#B3E8D7",
            "icon": "tag",
            "rulerColour": "#B3E8D7",
            "iconColour": "#B3E8D7",
            "rulerLane": "full"
        },

        "#NOTE": {
            "foreground": "#000000",
            "background": "#e2ebf0",
            "icon": "note",
            "rulerColour": "#e2ebf0",
            "iconColour ": "#e2ebf0"
        }
    },
}