VSCode中的交互式Playground：即时运行你的JS/TS代码

VSCode提供四种JS/TS交互式执行方式：一、内置Node.js REPL终端；二、TypeScript Playground扩展支持内联代码评估；三、Code Runner插件实现一键运行；四、Notebook格式分步执行与可视化输出。

如果您在VSCode中编写JavaScript或TypeScript代码，希望无需切换到终端或创建独立文件即可快速验证逻辑，VSCode内置的交互式Playground功能可提供实时执行环境。以下是启用与使用该功能的具体方式：

本文运行环境：MacBook Air，macOS Sequoia

一、使用内置JavaScript REPL终端

VSCode自带集成终端支持Node.js环境，可通过REPL模式直接输入并执行JS表达式，适用于轻量级即时反馈场景。

1、按下 Ctrl+`（Windows/Linux）或 Cmd+`（macOS）打开集成终端。

2、在终端中输入 node 并回车，进入Node.js交互式环境。

3、键入任意合法JS语句，例如 console.log("Hello Playground")，立即查看输出结果。

4、输入 `.exit` 或按 Ctrl+C 两次退出REPL。

二、启用TypeScript Playground扩展

官方TypeScript插件提供内联代码评估能力，可在.ts文件中选中代码块后直接运行，支持类型检查与错误高亮。

1、在VSCode扩展市场中搜索并安装 TypeScript Playground（由Microsoft发布）。

2、打开一个 .ts 文件，输入如下代码：const x: number = 42; console.log(x * 2);

3、用鼠标选中该代码段，右键选择 "Run Code in TypeScript Playground"。

4、输出面板将自动弹出并显示执行结果及可能的类型错误提示。

三、配置Code Runner插件实现一键执行

Code Runner插件支持对当前编辑器中的JS/TS片段进行上下文感知式运行，无需保存为文件，适配多语言混合开发场景。

ChatPDF

使用ChatPDF，您的文档将变得智能!跟你的PDF文件对话，就好像它是一个完全理解内容的人一样。

327

查看详情

1、安装扩展 Code Runner（作者：Jun Han）。

2、打开命令面板（Cmd+Shift+P），执行 Preferences: Open Settings (JSON)。

3、在settings.json中添加配置项："code-runner.runInTerminal": true 和 "code-runner.executorMap": {"typescript": "ts-node"} 。

4、确保系统已全局安装 ts-node：在终端中运行 npm install -g ts-node。

5、在编辑器中右键选择 "Run Code"，或使用快捷键 Ctrl+Alt+N（Windows/Linux）/Cmd+Option+N（macOS）。

四、使用Notebook格式创建交互式JS/TS文档

VSCode原生支持Jupyter Notebook，通过安装对应内核，可将JS/TS代码嵌入单元格中，实现分步执行与可视化输出。

1、安装扩展 Jupyter 和 Jupyter JavaScript（或 Node.js Kernel）。

2、新建文件并保存为 playground.ipynb，VSCode将自动识别为Notebook。

3、点击单元格左侧的加号图标，新增一个代码单元格。

4、在单元格中输入 console.log(new Date().toLocaleTimeString());，按 Shift+Enter 执行。

5、每个单元格独立运行，输出结果直接显示在下方，支持变量跨单元格复用（依赖内核状态）。

以上就是VSCode中的交互式Playground：即时运行你的JS/TS代码的详细内容，更多请关注php中文网其它相关文章！