Code Runner 默认输出到OUTPUT面板导致交互卡顿和console.log延迟,应勾选code-runner.runInTerminal并关闭preserveFocus;ESLint与Prettier规则冲突需统一配置格式化器、校验范围及.prettierrc;插件过多拖慢启动应精简至12个以内;性能监控推荐performance.now()或Chrome DevTools Profiler。

Code Runner 运行 JS 时看不到 console.log 输出?
默认情况下,Code Runner 把输出打到“OUTPUT”面板,而不是终端——这意味着 process.stdin、readline 或需要交互的代码会卡住,console.log 虽然能显示,但若涉及异步或缓冲(比如 Node.js 的 stdout 默认行缓冲),可能延迟或不全。
解决方法很简单:
- 打开 VSCode 设置(
Ctrl + ,),搜索code-runner.runInTerminal - 勾选该项,让所有
Code Runner执行都走集成终端 - 顺手关掉
code-runner.preserveFocus,避免运行后焦点还留在编辑器里
这样就能获得和手动敲 node filename.js 完全一致的行为,包括颜色输出、实时流式日志、prompt() 响应等。
ESLint + Prettier 同时启用,为什么保存后代码越改越乱?
这不是插件冲突,是规则打架。ESLint 检查语义(比如变量未定义、for...in 遍历数组),Prettier 只管格式(缩进、括号换行、引号)。但两者在“空格/分号/逗号”这类边界上容易互相覆盖。
关键配置必须同步:
-
"editor.defaultFormatter": "esbenp.prettier-vscode"—— 明确指定 Prettier 是唯一格式化器 -
"eslint.validate": ["javascript", "javascriptreact"]—— 确保 ESLint 监听 .js 和 .jsx - 项目根目录加
.prettierrc,内容至少含{"semi": false, "singleQuote": true},和 ESLint 规则对齐 - 禁用其他格式化插件(如
Beautify、JavaScript Formatter),它们会在保存时偷偷介入
否则你改一次,Prettier 插入单引号,ESLint 紧跟着报 quotes 错误,再自动修成双引号……死循环。
插件太多导致 VSCode 启动慢、JS 文件高亮延迟?
VSCode 启动时会为每个插件加载语言服务器(LSP),而 JavaScript 相关插件(ESLint、Prettier、JavaScript and TypeScript Nightly、Vetur)都依赖同一套底层分析引擎。装得越多,初始化越久,尤其打开大文件或 node_modules 时明显卡顿。
实测有效裁剪策略:
- 卸载
Auto Rename Tag:HTML 标签重命名完全可用 VSCode 原生功能(editor.linkedEditing开启即可) - 停用
Bracket Pair Colorizer:新版 VSCode 已内置括号高亮(editor.guides.bracketPairs),彩色只是锦上添花 - 把
Live Server设为“仅在 HTML 文件中激活”:"liveServer.settings.donotVerifyOpenFile": true,避免 JS 文件也触发监听 - 检查插件权限:右键插件 → “Extension Settings” → 关掉
Enable when debugging或Enable on startup等非必要选项
一个稳定在 12 个以内的插件列表,比堆满 30 个“热门推荐”更能保障 JS 开发的响应速度。
想监控 JS 代码实际运行耗时,但 console.time 太粗糙?
console.time 和 console.timeEnd 只能测同步块,对 Promise、microtask、事件循环调度毫无感知。真正要定位性能瓶颈,得靠 Node.js 自带的 perf_hooks 或 Chrome DevTools 协议。
轻量级方案(无需调试器):
- 用
performance.now()替代Date.now(),精度达微秒级 - 对异步流程,包裹
await块并记录前后时间差:const start = performance.now(); await someAsyncFn(); console.log(performance.now() - start); - 启动时加
--inspect参数:node --inspect filename.js,然后在 Chrome 地址栏输入chrome://inspect→ 找到你的进程 → “Open dedicated DevTools for Node” → Profile 标签页录制 CPU 使用
注意:VSCode 的调试器(launch.json 中 "type": "node")默认已启用 --inspect,所以直接 F5 启动就能进 Profiler,不用额外配命令行。


















