提示：本文详细介绍 RunJS for Mac 的核心功能与操作流程，适用于 JavaScript/TypeScript 心界面快速创建、测试和迭代代码片段。
方法 2：从侧边栏右键菜单选择“New Snippet”
一、核心界面与工作区详解
1.1 主界面工具
RunJS for Mac 采用简洁的双面板设视创建、测试和迭代代码片段。
- 左侧编辑器面板：支持 JavaScript、TypeScript、JSX 语法高亮，实时错误核心操作流程。
- 右侧输出面板：显示代码执行结查。
- 顶部工具栏：包含运行、格式化、清空、设置等核心操作按钮。
- 侧边栏数代码片段项目与文件夹。（Cmd+B 切换）：管理器
1.2 工作区组件
- 编辑器状态栏：显示语言模式（JS/TS）、光标位置、代码错误数量。
- 环境选择器：可在 Node.js、Browser、Deno 等运行时环境间切换。
- 模块面板（Cmd+Shift+M）：快速查看已安装的 NPM 模块及内置 API。
- 变量监视器（Cmd+Shift+W）：实时查看表达式值的变化。
二、完整操作流程：从创建到导出
2.1 创建/打开项目
步骤 1：点击工具栏
- 方法 1：点击工具栏
+按钮或按 Cmd + N
步骤 2：设置项目环境
- 点击环境选择器（顶部右侧），选择“Node.js 18”或“Browser”。
- 如需 TypeScript，直接在编辑器输入
.ts后缀或从状态栏切换。
2.2 编写与执行代码
步骤 3：输入示例代码
// 异步示例
const fetchData = async () => {
const res = await fetch('https://api.github.com/users/octocat');
return res.json();
};
fetchData().then(console.log);
步骤 4：执行代码
- 快捷键：Cmd + Enter（运行全部）
- 快捷键：Cmd + Shift + Enter（运行选中行）
- 快捷键：Cmd + Shift + Enter（值输入表达式（如
▶运行按钮
2.3 调试与检查输出
步骤 5：查看结果
- 右侧面板的“Output”标签显示返回值。
- “Console”标签显示
console.log输出。 - “Network”标签显示 fetch 请求详情（值。
步骤 6：使用变量监视器
- 按 Cmd + Shift + W 打开监视面板。
- 输入表达式（如
res.status）实时查看值。
2.4 保存与导出
步骤 7：保存项目
- 自动保存：默认启用，无需手动操作。
.js 或 .ts 文件。
