推荐几款vscode插件

调试界的“透视眼”：Console Ninja

“别再切屏看浏览器控制台了，那是在浪费生命。”

痛点直击

你在代码里写了 console.log(data) ，然后得切到浏览器，打开 F12，在满屏的报错和警告里找你刚刚打印的那行字。如果不小心刷新了页面，还得重新来一次。 这种“写代码 -> 切窗口 -> 找日志”的循环，每天要重复几百次。

硬核之处

它通过修改构建工具（Vite/Webpack 等）的运行时，把 console.log 的输出结果，直接“悬浮”显示在你的 VS Code 代码行旁边。

逆天体验

• 零切换： 你一边写代码，旁边的虚字就一边跳出结果。

• 上下文清晰： 你再也不用在 Log 里加 "Here 111" , "Check Data" 这种标记了，因为日志就在代码旁边，你永远知道这个值是哪行代码打出来的。

• 鼠标悬停： 如果打印的是一个巨大的 JSON 对象，鼠标放上去就能展开查看详情，完全不需要浏览器控制台。

PART 02

代码的“实时演练场”：Quokka.js

“这是 JavaScript 的草稿纸，你的想法还没写完，结果已经出来了。”

痛点直击

突然想测试一个正则表达式对不对，或者想试一下 Array.reduce 的逻辑。 通常做法：新建一个 test.js -> 写代码 -> 打开终端 -> node test.js -> 报错 -> 修改 -> 再运行。 太慢了！

硬核之处

它是一个 实时运行的暂存器（Scratchpad） 。 当你新建一个 Quokka 文件，你输入的每一个字符，都会被立即执行。变量的值会直接显示在行尾，报错会直接标红。

逆天体验

• 光速反馈： 还没等你按下保存键，它就已经告诉你代码逻辑通不通了。

• 颜色覆盖： 代码行左边会有方块， 绿色 代表执行过了， 灰色 代表那是死代码（跑不到）， 红色 代表报错。

• 极致效率： 用它来刷 LeetCode 或者测试 API 数据处理逻辑，效率比传统方式高 10 倍。

PART 03

3. 代码界的“美图秀秀”：CodeSnap

“别再用微信/QQ 截图发代码了，那是对你代码的侮辱。”

痛点直击：

直接复制文本？格式乱了，没有高亮，看着费劲。

用系统截图工具？把行号、滚动条、侧边栏都截进去了，还得手动裁剪。背景也是乱的，毫无美感。

“代码写得烂不要紧，截图一定要帅。”这是程序员最后的倔强。

硬核之处：

• Mac 风格窗体：只要选中代码 -> 右键 CodeSnap。它会自动给你的代码加上漂亮的圆角、阴影，以及那个标志性的Mac 红黄绿三色窗口按钮
• 所见即所得：它完美保留你当前的 VS Code颜色主题（Theme）和字体。你用的是 Dracula 主题，截出来的图就是 Dracula 风格；你用的是 JetBrains Mono 字体，截图里也是。
• 智能调整：你可以拖动边缘调整截图的宽窄，甚至可以隐藏行号，只展示最核心的逻辑。