VSCode 中的 TODO 列表

本文的灵感来自Caitlyn Greffly在Twitter上发起的一条帖子

那么，问题在于，在编写代码时，如何管理你的 TODO 列表？你正在开发组件的基本功能，并且有一个工作计划，可以是工作流程图，也可以是书面清单。那么，如何在脑海中记录这些 TODO 呢？有几种简单的方法：

• 手写清单（现在谁还写？）
• 项目目录中的 Markdown 文件
• Trello Board 是一个很好的视觉提醒器，尤其是与 Trello 移动应用程序结合使用时。

VSCode 扩展

如果您使用 VSCode 作为 IDE，那么您已经知道它拥有大量扩展，几乎可以满足您的所有需求。几个月来，我一直在使用一个名为“TODO Tree”的扩展，它在 VSCode 的资源管理器窗格中显示树形视图。单击树中的 TODO 将打开文件并将光标置于包含该 TODO 的行上。

它的基本工作原理如下。从上面的链接安装扩展，并通过在源代码中添加 TODO 来测试它，如下所示：
// TODO - todo note

或 FIXME 注释
// FIXME - fix something

现在让我们探索一下界面

界面

动图

注意，侧边栏中现在有一个 TODO 树框。其中有多个图标（见上文）用于提供不同的选项来过滤和显示 TODO 或 FIXME 注释列表。点击任意注释时，源文件都会自动打开。

强调

在我看来，最棒的功能之一是能够高亮源代码中的注释，并为 TODO 树中的图标添加颜色代码。此功能在源代码中有详细的文档，我在下面提供了我的设置。只需将其复制到你的 VSCode settings.json 即可：

  "todo-tree.customHighlight": {
    "TODO": {
      "icon": "check",
      "type": "line",
      "iconColour": "yellow",
      "foreground": "red",
      "background": "yellow",
    },
    "FIXME": {
      "icon": "beaker",
      "iconColour": "red",
      "foreground": "white",
      "background": "red"
    }
  },

结果如下：

尝试一下 TODO Tree，如果我可以帮助您配置，请给我留言。