提升开发效率：VSCode 中的两大神器
在 JavaScript / TypeScript 开发中，console.log 是我们最常用的调试工具之一。但频繁地在代码中手动插入 console.log，然后切换到浏览器的 DevTools 查看输出，不仅效率低下，还容易让人感到疲惫。幸运的是，VSCode 提供了两个强大的插件，可以彻底改变这种状况，让你的调试工作变得轻松又高效。
Turbo Console Log：让日志生成变得轻松
Turbo Console Log 是一个非常实用的插件，它可以帮助你快速生成带有文件名、行号和函数名的 console.log，并且支持多种快捷操作。
快速生成日志
选中变量后，按下快捷键（Windows：Ctrl+Alt+L，Mac：Option+Control+L），插件会自动生成类似以下的日志：
arduino
console.log('🚀 file:api.ts ~ line:42 ~ token', token);这样的日志不仅清晰，还能帮助你快速定位问题。
批量管理日志
Turbo Console Log 提供了批量管理日志的功能，你可以通过快捷键快速注释、取消注释或删除日志：
- • 注释：
Alt+Shift+C/Option+Shift+C - • 取消注释：
Alt+Shift+U/Option+Shift+U - • 删除：
Alt+Shift+D/Option+Shift+D
这些操作只针对插件生成的日志，不会误删你手动编写的代码。
高度可定制
你还可以在 settings.json 中自定义日志的前缀、引号、分号以及日志类型（如 log、warn、error 等），支持 20 多种语言。
Console Ninja：将 DevTools 搬进编辑器
Console Ninja 是另一个强大的插件，它可以直接在 VSCode 编辑器中显示 console.log 的输出，让你无需切换到浏览器就能查看日志。
实时日志
当你启动项目（如 npm run dev 或 vite）时，Console Ninja 会将 console.log 的输出直接显示在代码行尾。例如：
arduino
console.log('user', user); // 输出结果会直接显示在这一行如果你将鼠标悬停在输出上，还可以展开对象，查看详细内容。
运行时错误
Console Ninja 还会将错误堆栈直接贴在源码位置，点击即可跳转到相关代码，方便你快速定位问题。
网络日志
对于网络请求，Console Ninja 会显示请求状态码、耗时和响应体，让你对网络请求的细节一目了然。
零配置
Console Ninja 支持多种开发框架，如 Vite、Webpack、Next.js、Nuxt 和 Nest.js 等，无需额外配置即可使用。
组合使用，高效调试
将 Turbo Console Log 和 Console Ninja 结合使用，可以形成一个完整的调试工作流：
-
- 插入日志：使用 Turbo Console Log 的快捷键快速生成日志。
-
- 实时查看：Console Ninja 会在代码行尾直接显示日志输出。
-
- 一键清场：调试完成后，使用 Turbo Console Log 的快捷键删除所有生成的日志，或者通过 Console Ninja 的命令面板暂停输出。
一键清场，零残留
调试完成后，最怕的就是忘记删除 console.log。Turbo Console Log 提供了快捷键（Windows / Linux：Alt + Shift + D，macOS：Option + Shift + D）来删除当前文件中所有由插件生成的日志，而不会影响你手动编写的代码。
如果你希望彻底清除所有日志，包括手写的 console.log，可以通过全局搜索（Ctrl + Shift + H / Cmd + Shift + H），勾选正则表达式，查找并替换以下内容：
lua
console.(log|warn|error|info|debug)([^)]*);?\s*将所有匹配的日志替换为空，即可清理整个项目。
安装方法
打开 VSCode-->点击左侧的扩展图标-->搜索并安装以下插件
- • Turbo Console Log
- • Console Ninja
总结：
通过 Turbo Console Log 和 Console Ninja，你可以快速生成日志、实时查看输出，并在调试完成后一键清除日志，极大地提升了开发效率。