提升开发效率,VSCode 中的两大神器

提升开发效率：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），插件会自动生成类似以下的日志：

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 的输出直接显示在代码行尾。例如：

console.log('user', user); // 输出结果会直接显示在这一行

如果你将鼠标悬停在输出上，还可以展开对象，查看详细内容。

运行时错误

Console Ninja 还会将错误堆栈直接贴在源码位置，点击即可跳转到相关代码，方便你快速定位问题。

网络日志

对于网络请求，Console Ninja 会显示请求状态码、耗时和响应体，让你对网络请求的细节一目了然。

零配置

Console Ninja 支持多种开发框架，如 Vite、Webpack、Next.js、Nuxt 和 Nest.js 等，无需额外配置即可使用。

组合使用，高效调试

将 Turbo Console Log 和 Console Ninja 结合使用，可以形成一个完整的调试工作流：

1. 1. 插入日志：使用 Turbo Console Log 的快捷键快速生成日志。
2. 2. 实时查看：Console Ninja 会在代码行尾直接显示日志输出。
3. 3. 一键清场：调试完成后，使用 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），勾选正则表达式，查找并替换以下内容：

console.(log|warn|error|info|debug)([^)]*);?\s*

将所有匹配的日志替换为空，即可清理整个项目。

安装方法

打开 VSCode-->点击左侧的扩展图标-->搜索并安装以下插件

• • Turbo Console Log
• • Console Ninja

总结：

通过 Turbo Console Log 和 Console Ninja，你可以快速生成日志、实时查看输出，并在调试完成后一键清除日志，极大地提升了开发效率。