VSCODE 系列（四）Todo Tree插件，注释高亮，颜色可编辑

已于 2022-09-22 22:00:33 修改
阅读量3.3k 收藏 12
点赞数 5
分类专栏： 软件 文章标签： vscode ide 编辑器
于 2022-09-20 17:20:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26849933/article/details/126957101
版权
本文介绍如何在VSCode中使用并配置TODO高亮插件，通过个性化设置帮助开发者高效管理代码中的注释标记，如TODO、FIXME等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

前言

我们写程序的时候，难免会遇到一些情况需要标记或者搁置，在写代码的时候会用一些特殊的注释来表示不同的内容，使我们可以快速的定位我们注释的位置。

下载和安装

在VSCODE插件中直接搜索下载即可。
在这里插入图片描述

安装成功后，在左边栏会多出一个图标。
在这里插入图片描述

配置

先看一下我个人的配色配置。
在这里插入图片描述“CTRL+，”打开设置，在右上方打开settings.json文件，加入以下配置即可

    "todo-tree.tree.showScanModeButton": true,
    "todo-tree.filtering.ignoreGitSubmodules": true,
    "todohighlight.keywords": [],
    "todo-tree.tree.showCountsInTree": true,
    "todohighlight.keywordsPattern": "TODO:|FIXME:|NOTE:|\\(([^)]+)\\)",
    "todohighlight.defaultStyle": {},
    "todohighlight.isEnable": false,
    "todo-tree.tree.scanMode": "workspace",
    "todo-tree.highlights.customHighlight": {
        "BUG": {
            "icon": "bug",
            "foreground": "#F56C6C",
            "type": "text"
        },
        "FIXME": {
            "icon": "flame",
            "foreground": "#FF9800",
            "type": "tag-and-comment"
        },
        "TODO": {
            "icon": "check",
            "iconColour": "#81ec29",
            "foreground": "#FFEB38",
            "background": "#E63900",
            "type": "line",
            "rulerColour": "#2237b1"
        },
        "NOTE": {
            "icon": "note",
            "foreground": "#67C23A",
            "type": "whole-line"
        },
        "INFO": {
            "icon": "info",
            "foreground": "#909399",
            "type": "text-and-comment"
        },
        "TAG": {
            "icon": "tag",
            "foreground": "#409EFF",
            "type": "line"
        },
        "HACK": {
            "icon": "versions",
            "foreground": "#E040FB",
            "type": "line"
        },
        "XXX": {
            "icon": "unverified",
            "foreground": "#E91E63",
            "type": "line"
        }
    },
    "todo-tree.general.tags": [
        "BUG",
        "HACK",
        "FIXME",
        "TODO",
        "INFO",
        "NOTE",
        "TAG",
        "XXX"
    ],
    "todo-tree.general.statusBar": "total",
    "todo-tree.highlights.backgroundColourScheme": [
        "red",
        "orange",
        "yellow",
        "green",
        "blue",
        "indigo",
        "violet"
    ],

可根据自己喜好，随意更改颜色，名称，前景色，背景色等内容。
若实现icon功能，需要下载vscode-icons插件。icon样式可自选，名称见链接。

vscode配置Todo Tree插件
qq_34761779的博客
01-11 1315
vscode配置Todo Tree插件
VSCode 插件 Todo Tree 待办事项
简单的编程博客
04-04 1499
官方介绍：这个扩展可以快速搜索工作区中的注释标签，并将它们显示在活动栏的树状图中我们写代码的时候，难免会遇到一些情况需要标记或搁置，比如：前端开发者在编写页面的时候页面样式完成了，但是后端接口还没有开发完成，那么该页面和后端的交互就要暂时搁置，此时我们可以添加一个特殊的注释来表示，方便接口开发完成后再来开发时快速定位到这个页面，这个插件就是来完成这个功能的，是一个很实用的插件。
注释容易混淆？修改vscode注释颜色，自定义你的专属颜色
最新发布
weixin_73266891的博客
03-27 409
【代码】注释容易混淆？修改vscode注释颜色，自定义你的专属颜色。
VScode Todo Tree的配置
主要学习关于图像处理和SLAM领域
12-22 1283
VScode Todo Tree记录一下如何配置，如何个性化自己的标签等。
VSCODE Todo Tree配置高亮显示
m0_51461473的博客
09-27 1265
其中画圈部分可以自行添加标签，如我添加了“ly”，“difference”等标签，在添加完自己想要的标签后可对其颜色进行设定，如添加的‘‘ly’标签，在后面进行补充即可，鼠标 光标点击在图1所示位置会出来颜色设置，然后点击颜色区域即可设置成功，具体如下图所示。找到自己想要注释的代码位置，按照平常注释习惯注释，即可出现高亮显示，具体如下图所示，注释的地方和我们刚刚设置的颜色相同，同时在VSCODE左侧也可以很快找到注释的位置，具体也如下面所示。依次按照1，2，3顺序进行操作即可。
vscode常用插件压缩包
07-13
- `Todo Tree`：展示待办事项和注释中的 TODO 标签，帮助跟踪工作进度。 这些插件只是VSCode庞大生态系统中的一部分，用户可以根据个人需求安装更多的插件，以定制自己的开发环境。通过VSCode的Marketplace，你...
vscode.zip - vscode实用性插件
01-04
5. **Todo Tree** (todotree.vsix): 这个插件可以生成一个树形视图，展示代码中的待办事项（如TODO、FIXME等注释），帮助开发者追踪代码维护和改进任务。 6. **Git Graph** (gitgraph.vsix): 提供了一个图形化的Git...
vscode注释高亮
03-18
好的，用户想了解如何在VSCode中配置注释高亮或相关插件推荐。首先，我需要回忆一下VSCode的高亮机制。默认情况下，注释是灰色或斜体的，但用户可能希望更突出显示。 根据引用[1]，VSCode有高级文本高亮插件，比如...
Vscode有什么好用的插件？
jakpopc的博客
06-21 4329
我是Jackpop，我们交个朋友吧！VS Code的口碑越来越好，受欢迎度也越来越高，以我为例，有时一个项目中可能会用到C++、Java、JS等不同编程语言，如果针对每一种语言都去安装一款对应的IDE，那样不仅会浪费很多时间，而且会极大的拖慢电脑速度。而VS Code通过简单的配置，就可以让它与对应语言当下最为流行的IDE相提并论，因此，就没必要再去安装PyCharm、IDEA、Clion、Webstorm这些了。VS Code之所以如此受欢迎，离不开它强大的社区，这让VS Code有丰富而实用的插件。而且
VSCode 插件全解析：解锁编码新维度
chaosweet的博客
01-03 1289
选择正确的工具，是大师与徒工之间的区别。
Vscode 插件：Todo Tree 简介和使用方法
热门推荐
weixin_52739099的博客
03-11 1万+
Todo Tree 是 Visual Studio Code（VS Code）中一款强大的插件，可以帮助你管理项目中的 TODO 注释和其他标记。通过扫描你的项目文件，并将其中包含的待办事项和自定义标记显示在一个树状视图中，Todo Tree 使得跟踪项目中的任务变得更加容易。Todo Tree 插件为 VS Code 用户提供了一个简单而强大的工具，帮助他们更有效地管理项目中的待办事项和标记。通过清晰的树状视图和灵活的配置选项，Todo Tree 使得跟踪任务变得轻松愉快。
【5】Vscode Todo Tree插件使用和TODO、FIXME和XXX的注释使用说明以及自制自己的TODO图标样式！
丨汀、的博客
04-12 1万+
1.Vscode Todo Tree插件安装 在vscode扩展中心，搜索todo tree然后安装， Todo Tree插件会有自带的icon图标样式，如下图： 2.TODO、FIXME和XXX的注释使用说明 TODO: + 说明： 如果代码中有该标识，说明在标识处有功能代码待编写，待实现的功能在说明中会简略说明。FIXME: + 说明： 如果代码中有该标识，说明标识处代码需要修正，甚至代码是错误的，不能工作，需要修复，如何修正会在说明中简略说明。XXX: + 说明： 如果代码中...
VSCode 待办事项高亮插件：todo-highlight 快速入门及实践指南
gitblog_00755的博客
09-11 1782
VSCode 待办事项高亮插件：todo-highlight 快速入门及实践指南 项目地址:https://gitcode.com/gh_mirrors/vsc/vscode-todo-highlight 项目介绍 VSCode Todo Highlight 是一个由 John G. Clark 开发的高效Visual Studio Code扩展，其主要功能是对代码中的 TODO, FIXME 以...
vscode插件-ToDo Tree (待办事项插件)
Judy1623
11-27 1065
Todo Tree是vscode中一款可以在侧边栏记录TODO注释（也可以配置其他的注释）并且可以高亮注释行的很优秀的插件。有的时候我们写程序的时候，难免会遇到一些情况需要标记或者搁置，在写代码的时候会用一些特殊的注释来表示不同的内容，使我们可以快速的定位我们注释的位置。
VSCode插件Todo Tree的使用
weixin_45871977的博客
08-05 1830
VSCode插件Todo Tree的使用
vscode 插件-better comments-代码注释高亮
RealizeInnerSelf丶
07-07 4600
目录安装使用效果扩展注释高亮配置使用代码中的注释效果安装 参考：VSCode中让注释也有高亮效果 vs code 插件里搜索 better comments 安装 使用 正常注释，前面使用相应的前缀即可(vs code 会结合插件自动用配置的颜色去渲染，插件自带5种高亮注释) // ! 红色的高亮注释 // ? 蓝色的高亮注释 // * 绿色的高亮注释 // todo 橙色的高亮注释 /...
vscode Todo Tree插件 配置，不啰嗦直接上代码cv即可
come from h5
05-22 738
/HACK:：这是一种权宜之计或临时解决方案。//BUG:：这是一个已知的错误或问题。这个标签和 //FIXME: 类似，都是用来标记代码中的 bug。//FIXME:：这里有一个已知的问题或错误需要修复。通常用于标记代码中的 bug 或问题，等待被修复。//TODO:：这里需要完成一些工作，但目前还未完成。//NOTE:：这是一个值得注意的事项，用于标记需要特别注意的地方，或者对某个问题的额外解释。//INFO:：这是对代码的一些额外信息或解释。也可以自定义自己的tag，通常的大多就上面那么多。
vscode Todo Tree 简介和使用方法
呆呆狗
12-27 1468
vscode Todo Tree 简介和使用方法
vue3+vite结合mockjs实现ToduList
03-26
首先，使用 `vite` 创建一个新项目: ``` npm init vite-app my-todo-list ``` 安装 `axios` 和 `mockjs`: ``` npm i axios mockjs -S ``` 在 `src` 文件夹下创建一个 `api.js` 文件，用来封装与后端（即 `mockjs`）进行数据交互的函数: ```javascript import axios from 'axios' export default { fetchTodoList() { return axios.get('/api/todolist') }, addTodoItem(item) { return axios.post('/api/todolist', item) }, deleteTodoItem(id) { return axios.delete(`/api/todolist/${id}`) }, updateTodoItem(item) { return axios.put(`/api/todolist/${item.id}`, item) } } ``` 然后，在 `src` 文件夹下创建一个 `mock.js` 文件，用来模拟后端数据处理逻辑： ```javascript import Mock from 'mockjs' const todoList = [] for (let i = 1; i <= 10; i++) { todoList.push({ id: i, text: `Todo item ${i}`, done: false, }) } Mock.mock('/api/todolist', 'get', () => { return { code: 200, data: todoList } }) Mock.mock('/api/todolist', 'post', ({ body }) => { body = JSON.parse(body) const newItem = { id: todoList.length + 1, text: body.text, done: false } todoList.push(newItem) return { code: 200, data: newItem } }) Mock.mock(/\/api\/todolist\/[1-9]/, 'delete', (options) => { const id = options.url.split('/')[3] for (let i = 0; i < todoList.length; i++) { if (todoList[i].id == id) { todoList.splice(i, 1) break } } return { code: 200, data: id } }) Mock.mock(/\/api\/todolist\/[1-9]/, 'put', (options) => { const id = options.url.split('/')[3] const body = JSON.parse(options.body) for (let i = 0; i < todoList.length; i++) { if (todoList[i].id == id) { todoList[i].text = body.text todoList[i].done = body.done break } } return { code: 200, data: body } }) ``` 现在，我们已经模拟完了后端数据处理的逻辑，接下来是前端的代码。在 `src` 文件夹下，创建 `components` 文件夹，并在其中创建一个 `TodoList.vue` 文件，用来展示待办事项列表： ```vue <template> <div> <h3>My Todo List</h3> <ul> <li v-for="item in todoList" :key="item.id"> <input type="checkbox" v-model="item.done" @change="updateItem(item)"> <span :style="{'text-decoration': item.done ? 'line-through' : 'none'}">{{ item.text }}</span> <button @click="deleteItem(item)">Delete</button> </li> </ul> <form @submit.prevent="addItem"> <input type="text" v-model="newItemText"> <button>Add</button> </form> </div> </template> <script> import api from '../api.js' export default { data() { return { todoList: [], newItemText: '' } }, mounted() { this.fetchTodoList() }, methods: { fetchTodoList() { api.fetchTodoList().then(res => { this.todoList = res.data }) }, addItem() { if (!this.newItemText) { return } const newItem = { text: this.newItemText, done: false } api.addTodoItem(newItem).then(res => { this.todoList.push(res.data) this.newItemText = '' }) }, deleteItem(item) { api.deleteTodoItem(item.id).then(() => { this.todoList.splice(this.todoList.indexOf(item), 1) }) }, updateItem(item) { api.updateTodoItem(item).then(() => { // do nothing }) } } } </script> ``` 在 `App.vue` 文件中引入 `TodoList` 组件，在模板中添加： ```vue <template> <div id="app"> <TodoList /> </div> </template> <script> import TodoList from './components/TodoList.vue' export default { components: { TodoList } } </script> ``` 最后，在根目录下的 `vite.config.js` 文件中添加一个代理，将 `/api` 路径代理到 `mock.js` 所在的地址： ```javascript export default { server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } } } ``` 现在，启动项目，就可以看到我们的 TodoList 页面了： ``` npm run dev ``` 项目 Github 地址：https://github.com/quietbison/vue3-vite-mock-todolist
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胖茄子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值