当前时间： 2026-02-12 23:29:10
分类：软件教程
评论(0)
推荐几款vscode插件
你在代码里写了 console.log(data) ，然后得切到浏览器，打开 F12，在满屏的报错和警告里找你刚刚打印的那行字。如果不小心刷新了页面，还得重新来一次。 这种“写代码 -> 切窗口 -> 找日志”的循环，每天要重复几百次。
它通过修改构建工具（Vite/Webpack 等）的运行时，把 console.log 的输出结果，直接“悬浮”显示在你的 VS Code 代码行旁边。
-
零切换： 你一边写代码，旁边的虚字就一边跳出结果。
-
上下文清晰： 你再也不用在 Log 里加 “Here 111” , “Check Data” 这种标记了，因为日志就在代码旁边，你永远知道这个值是哪行代码打出来的。
-
鼠标悬停： 如果打印的是一个巨大的 JSON 对象，鼠标放上去就能展开查看详情，完全不需要浏览器控制台。
“这是 JavaScript 的草稿纸，你的想法还没写完，结果已经出来了。”
突然想测试一个正则表达式对不对，或者想试一下 Array.reduce 的逻辑。 通常做法：新建一个 test.js -> 写代码 -> 打开终端 -> node test.js -> 报错 -> 修改 -> 再运行。 太慢了！
它是一个 实时运行的暂存器（Scratchpad） 。 当你新建一个 Quokka 文件，你输入的每一个字符，都会被立即执行。变量的值会直接显示在行尾，报错会直接标红。
-
光速反馈： 还没等你按下保存键，它就已经告诉你代码逻辑通不通了。
-
颜色覆盖： 代码行左边会有方块， 绿色 代表执行过了， 灰色 代表那是死代码（跑不到）， 红色 代表报错。
-
极致效率： 用它来刷 LeetCode 或者测试 API 数据处理逻辑，效率比传统方式高 10 倍。
“别再用微信/QQ 截图发代码了，那是对你代码的侮辱。”
用系统截图工具？把行号、滚动条、侧边栏都截进去了，还得手动裁剪。背景也是乱的，毫无美感。
“代码写得烂不要紧，截图一定要帅。” 这是程序员最后的倔强。
-
Mac 风格窗体： 只要选中代码 -> 右键
CodeSnap。它会自动给你的代码加上漂亮的圆角、阴影，以及那个标志性的 Mac 红黄绿三色窗口按钮。
-
所见即所得： 它完美保留你当前的 VS Code 颜色主题（Theme）和字体。你用的是 Dracula 主题，截出来的图就是 Dracula 风格；你用的是 JetBrains Mono 字体，截图里也是。
-
智能调整： 你可以拖动边缘调整截图的宽窄，甚至可以隐藏行号，只展示最核心的逻辑。
本站文章均为手工撰写未经允许谢绝转载：
夜雨聆风 »
推荐几款vscode插件
夜雨聆风
