当前位置：首页 > news >正文

vscode添加代办相关插件，提高开发效率

news 2025/9/16 16:43:56

这里写目录标题

前言
插件添加
- 添加TODO Highlight
- - 安装TODO Highlight
  - 在项目中自定义需要高亮显示的关键字
- TODO Tree
- - 安装TODO Tree插件
- 单行注释快捷键

前言

在前端开发中，我们经常会遇到一些未完成、有问题或需要修复的部分，但又暂时未完成或未确定如何处理的情况。为了方便日后查找和修复这些问题，我们可以在代码中添加 TODO 或 FIX 标记作为标识。在 VSCode 中，有一些工具和技巧可以帮助我们快速、方便地管理这些信息：

使用 TODO Highlight 扩展
安装并配置 TODO Highlight 扩展，可以将代码中的 TODO、FIXME、BUG 等关键词高亮显示，让它们在代码中更加显眼。
使用 TODO Tree 扩展
安装并配置 TODO Tree 扩展，可以在侧边栏中查看一个列表，列出所有的 TODO 注释，方便查看和管理。
使用单行注释
在代码中使用单行注释 // TODO: Fix this 或 // FIXME: Implement that 来标记需要处理的问题，这样可以在代码中直观地看到这些注释。
使用多行注释
在需要详细描述问题的地方，可以使用多行注释 /* TODO: Add detailed description */，这样可以提供更多的信息给其他开发者或日后的自己。
使用标签
除了常见的 TODO 和 FIXME 标签外，还可以根据需要定义自己的标签，比如 REFACTOR、IMPROVE 等，来区分不同类型的问题。
通过这些工具和技巧，我们可以更好地管理和处理代码中的问题，提高开发效率和代码质量。

插件添加

下面我将以vscode作为参考来安装相关插件。
在这里插入图片描述

添加TODO Highlight

TODO Highlight插件的作用是帮助开发者在代码中高亮显示带有特定关键词（如 TODO、FIXME、BUG 等）的注释。通过使用这个插件，开发者可以更容易地发现和管理代码中的未完成任务、需要修复的问题或其他重要注释。

安装TODO Highlight

在vscode的插件库中，我们搜索TODO Highlight ，然后进行安装即可。
在这里插入图片描述

在项目中自定义需要高亮显示的关键字

在 VSCode 中，默认会自动高亮 TODO: 和 FIXME: 等注释。若要在项目中自定义一些高亮的关键字并个性化设置颜色，可以按照以下步骤操作：

使用快捷键 Ctrl+Shift+P 打开命令面板。
在输入框中输入 settings.json，然后选择首选项：打开设置（JSON）。
在弹出的设置文件中，你可以选择编辑用户设置（影响所有项目）或当前工作区设置（只影响当前项目）。

"todohighlight.keywords": [{"text": "TODO","color": "red","backgroundColor": "yellow"},{"text": "todo","color": "red","backgroundColor": "yellow"},{"text": "MOCK","color": "white","backgroundColor": "#ffab00"}],

这样你就可以根据需要自定义高亮的关键字及其颜色了。

TODO Tree

VSCode 的 TODO Tree 插件可以方便地管理项目中的 TODO 等关键字信息。
TODO Tree的优点：

可视化管理：提供树状结构，方便查看和管理项目中的 TODO 事项。
自定义关键字：支持自定义关键字高亮，适应不同团队的需求。
跨文件搜索：能够快速在整个项目中搜索并显示待办事项。
便捷性：安装和配置简单，易于上手。

安装TODO Tree插件

在 VSCode 的插件市场中搜索 TODO Tree 插件，然后点击安装。
在 settings.json 中配置 TODO Tree。

"todo-tree.highlights.customHighlight": {"todo": {"icon": "bug","type": "line","iconColour": "#5520e5"},"bug": {"icon": "bug","type": "line","iconColour": "#e52021"},"暂无接口": {"icon": "info","type": "line","iconColour": "#e4b21d"}
},
"todo-tree.general.tags": ["bug","todo","暂无接口"
],
"todo-tree.highlights.enabled": false,
"todo-tree.tree.showCountsInTree": true,
"todo-tree.regex.regexCaseSensitive": false,
"todo-tree.general.revealBehaviour": "end of todo",

这样，你就可以在项目中使用 TODO Tree 查找待办事项了。
在这里插入图片描述

单行注释快捷键

设置快捷方式生成注释代码。
在vscode中打开User Snippets，然后新建一个文件，在这个文件中就可以编辑我们想要创建的快捷代码生成方式了。
在这里插入图片描述

{// Place your global 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:"ma todo": {"scope": "javascript,typescript","prefix": "td","body": ["// todo: "],"description": "生成代办快捷键"}
}

配置保存完成后，我们就可以在项目中通过敲击td来自动生成代办的代码。
通过以上配置，我们就可以在vscode的项目中愉快的使用todo注解和相关操作。