这里写目录标题
- 前言
- 插件添加
- 添加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注解和相关操作。
