VSCode 推荐插件之Turbo Console Log插件

关于Turbo Console Log插件

前言：在前端开发中，许多开发者习惯于频繁添加 console.log 语句来调试代码，查看变量值和程序执行流程。然而，这种手动添加和删除 log 语句的方法不仅耗时，而且调试时的log显得凌乱，可读性差。更糟糕的是，容易出现漏删情况，提交代码后可能影响他人的调试工作。

Turbo Console Log 插件应运而生

作为一个 VSCode 的强大工具，它极大地简化了这个过程。使用 Turbo Console Log 插件，你可以通过简单的快捷键快速插入格式化的 console.log 语句，极大地提高了调试效率。此外，它还提供一键删除所有 log 语句的功能，确保你的代码库干净整洁。
总体来说，Turbo Console Log 插件解决了前端开发者在调试过程中手动操作的痛点，使得调试过程更为高效、便捷，是每一个使用 VSCode 进行前端开发的程序员不可错过的利器。

Turbo Console Log简单使用说明

• 快捷console.log，选中某个变量后
  • Windows系统：ctrl + alt + L
  • Mac系统：ctrl + option + L
• 快捷多个console.log，选中某个变量后，按住alt键继续选中其他变量
  • Windows系统：ctrl + alt + L
  • Mac系统：ctrl + option + L
• 注释当前文件所有的console.log
  • Windows系统：alt + shift + c
  • Mac系统：option + shift + c
• 取消当前文件所有的已注释console.log
  • Windows系统：alt + shift + u
  • Mac系统：option + shift + u
• 删除当前文件所有的console.log
  • Windows系统：alt + shift + d
  • Mac系统： option + shift + d

Turbo Console Log 自定义配置说明

设置项 描述 默认值 logMessagePrefix 日志信息的前缀 🚀 logMessageSuffix 日志信息的后缀 : logType 打印日志的类型 log logFunction 当指定的logType属性将被忽略时，在插入的日志信息中使用的自定义日志函数 console.log delimiterInsideMessage 日志信息的分隔号 ~ quote 双引号或单引号 \" addSemicolonInTheEnd 是否在日志信息代码末尾加分号 true insertEnclosingClass 是否在日志消息中插入所选变量的当前Class类名 true insertEnclosingFunction 是否在日志信息中插入所选变量的函数 true includeFileNameAndLineNum 是否在日志消息中插入文件名和行号 true wrapLogMessage 是否在日志信息上下增加一行以横线分割的日志 true insertEmptyLineBeforeLogMessage 是否在日志信息代码前插入空行 true insertEmptyLineAfterLogMessage 是否在日志信息代码后插入空行 true

举个栗子：