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

这里写目录标题

  • 前言
  • 插件添加
    • 添加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: 等注释。若要在项目中自定义一些高亮的关键字并个性化设置颜色,可以按照以下步骤操作:

  1. 使用快捷键 Ctrl+Shift+P 打开命令面板。
  2. 在输入框中输入 settings.json,然后选择 首选项:打开设置(JSON)。
    在这里插入图片描述
  3. 在弹出的设置文件中,你可以选择编辑用户设置(影响所有项目)或当前工作区设置(只影响当前项目)。
"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插件

  1. 在 VSCode 的插件市场中搜索 TODO Tree 插件,然后点击安装。
    在这里插入图片描述

  2. 在 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注解和相关操作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/329162.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++初阶学习第十弹——探索STL奥秘(五)——深入讲解vector的迭代器失效问题

vector(上):C初阶学习第八弹——探索STL奥秘(三)——深入刨析vector的使用-CSDN博客 vector(中):C初阶学习第九弹——探索STL奥秘(四)——vector的深层挖掘和…

MYSQL 集群

1.集群目的:负载均衡 解决高并发 高可用HA 服务可用性 远程灾备 数据有效性 类型:M M-S M-S-S M-M M-M-S-S 原理:在主库把数据更改(DDL DML DCL)记录到二进制日志中。 备库I/O线程将主库上的日志复制到自己的中继日志中。 备库SQL线程读取中继日志…

Mongodb介绍及springboot集成增删改查

文章目录 1. MongoDB相关概念1.1 业务应用场景1.2 MongoDB简介1.3 体系结构1.4 数据模型1.5 MongoDB的特点 2. docker安装mongodb3. springboot集成3.1 文件结构3.2 增删改查3.2.1 增加insert3.2.2 保存save3.2.3 更新update3.2.4 查询3.2.5 删除 1. MongoDB相关概念 1.1 业务…

【学习笔记】Windows GDI绘图(五)图形路径GraphicsPath详解(上)

文章目录 图形路径GraphicsPath填充模式FillMode构造函数GraphicsPath()GraphicsPath(FillMode)GraphicsPath(Point[],Byte[])和GraphicsPath(PointF[], Byte[])GraphicsPath(Point[], Byte[], FillMode)和GraphicsPath(PointF[], Byte[], FillMode)PathPointType 属性FillMode…

jsp连接数据库

1.打开命令框进入数据库 打开eclipse创建需要连接的项目 粘贴驱动程序 查看驱动器 使用sql的包 int代表个 conlm代表列名 <%page import"java.sql.ResultSet"%> <%page import"java.sql.Statement"%> <%page import"java.sql.Connect…

关于如何创建一个可配置的 SpringBoot Web 项目的全局异常处理

前情概要 这个问题其实困扰了我一周时间&#xff0c;一周都在 Google 上旅游&#xff0c;我要如何动态的设置 RestControllerAdvice 里面的 basePackages 以及 baseClasses 的值呢&#xff1f;经过一周的时间寻求无果之后打算决定放弃的我终于找到了一些关键的线索。 当然在此…

html5 笔记01

01 表单类型和属性 input的type属性 单行文本框: typetext 电子邮箱 : typeemail 地址路径 : type url 定义用于输入数字的字段: typenumber 手机号码: typetel 搜索框 : typesearch 定义颜色选择器 : typecolor 滑块控件 : typerange 定义日期 :typedate 定义输入时间的控件…

CR80清洁卡都能用在什么地方?

CR80清洁卡&#xff08;也被称为ISO 7810 ID-1清洁卡&#xff09;的规格确实使其在各种需要读取磁条或接触式智能卡的设备中都有广泛的用途。这些设备包括但不限于&#xff1a; ATM自动终端机&#xff1a;当ATM机的磁条读卡器出现故障或读卡不灵敏时&#xff0c;可以使用CR80清…

第三期【数据库主题文档上传激励活动】已开启!快来上传文档赢奖励

2023年9月、11月&#xff0c;墨天轮社区相继举办了第一期与第二期【数据库主题文档上传激励活动】&#xff0c;众多用户积极参与、上传了大量优质的数据库主题干货文档&#xff0c;在记录经验的同时也为其他从业者带来了参考帮助&#xff0c;这正实现了“乐知乐享、共同成长”的…

以及Spring中为什么会出现IOC容器?@Autowired和@Resource注解?

以及Spring中为什么会出现IOC容器&#xff1f;Autowired和Resource注解&#xff1f; IOC容器发展史 没有IOC容器之前 首先说一下在Spring之前&#xff0c;我们的程序里面是没有IOC容器的&#xff0c;这个时候我们如果想要得到一个事先已经定义的对象该怎么得到呢&#xff1f;…

STM32自己从零开始实操02:输入部分原理图

一、触摸按键 1.1指路 项目需求&#xff1a; 4个触摸按键&#xff0c;主控芯片 TTP224N-BSBN&#xff08;嘉立创&#xff0c;封装 TSSOP-16&#xff09;&#xff0c;接入到 STM32 的 PE0&#xff0c;PE1&#xff0c;PE2&#xff0c;PE3。 1.2走路 1.2.1数据手册重要信息提…

AI--构建检索增强生成 (RAG) 应用程序

LLM 所实现的最强大的应用之一是复杂的问答 (Q&A) 聊天机器人。这些应用程序可以回答有关特定源信息的问题。这些应用程序使用一种称为检索增强生成 (RAG) 的技术。 典型的 RAG 应用程序有两个主要组件 索引&#xff1a;从源中提取数据并对其进行索引的管道。这通常在线下…

CTFshow之文件上传web入门151关-161关解密。包教包会!!!!

这段时间一直在搞文件上传相关的知识&#xff0c;正好把ctf的题目做做写写给自字做个总结&#xff01; 不过有一个确定就是所有的测试全部是黑盒测试&#xff0c;无法从代码层面和大家解释&#xff0c;我找个时间把upload-labs靶场做一做给大家讲讲白盒的代码审计 一、实验准…

保研笔试复习——nju

文章目录 一、单选计算机网络计算机组成原理数字逻辑电路数据结构操作系统微机系统 多选题计算机网络计算机系统结构操作系统 免责声明&#xff1a;题目源自于网络&#xff0c;侵删。 就在今天2024-5-18&#xff0c;考的题下面的只有一道AVL的原题&#xff0c;其他都不是原题&a…

【C++初阶】--- C++入门(上)

目录 一、C的背景及简要介绍1.1 什么是C1.2 C发展史1.3 C的重要性 二、C关键字三、命名空间2.1 命名空间定义2.2 命名空间使用 四、C输入 & 输出 一、C的背景及简要介绍 1.1 什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&…

Docker Hub注册及上传自定义镜像

说明&#xff1a;本文介绍如何注册Docker Hub&#xff0c;及将自己自定义镜像上传到Docker Hub上&#xff1b; 注册Docker Hub 浏览器输入&#xff1a;http://hub.docker.com/&#xff0c;进入Docker Hub官网 注&#xff1a;如果无法访问&#xff0c;可在GitHub上下载一个Ste…

全面掌握深度学习:从基础到前沿

引言&#xff1a;深入探索深度学习的世界 在人工智能&#xff08;AI&#xff09;的广阔领域中&#xff0c;深度学习已经成为最令人瞩目的技术之一。它不仅推动了科技的许多突破性进展&#xff0c;也正在改变我们的工作和生活方式。本博客旨在全面总结深度学习的关键知识点&…

分类和品牌关联

文章目录 1.数据库表设计1.多表关联设计2.创建表 2.使用renren-generator生成CRUD1.基本配置检查1.generator.properties2.application.yml 2.生成代码1.进入localhost:81生成代码2.将main目录覆盖sunliving-commodity模块的main目录 3.代码检查1.注释掉CategoryBrandRelationC…

Map遍历、反射、GC

map的遍历 用foreach遍历 HashMap<Character,Integer> map new HashMap<>();map.put(A,2);map.put(B,3);map.put(C,3);for (Map.Entry<Character,Integer> entry: map.entrySet()) {char key entry.getKey();int value entry.getValue();System.out.prin…

HTML | 在IDEA中配置Tomcat时遇到的一些问题的解决办法

目录 IDEA中没有web文件夹目录 Tomcat在哪里配置服务器 IDEA中没有web文件夹目录 首先说在IDEA中没有web这个文件夹的解决办法 在菜单栏中帮助中点击查找操作搜索添加框架支持&#xff08;因为我的IDEA会出现无法点击这个操作&#xff0c;所以我对该操作添加了快捷键&#xf…