提示：本文详细介绍 RunJS for Mac 的核心功能与操作流程，适用于 JavaScript/TypeScript 开发者快速创建、测试和迭代代码片段。
一、核心界面与工作区详解
1.1 主界面布局
RunJS 采用简洁的双面板设计：
- 左侧编辑器面板：支持 JavaScript、TypeScript、JSX 语法高亮，实时错误检查。
- 右侧输出面板：显示代码执行结果、Console 日志、网络请求及可视化数据。
- 顶部工具栏：包含运行、格式化、清空、设置等核心操作按钮。
- 侧边栏文件管理器（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：从侧边栏右键菜单选择“New Snippet”
步骤 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（运行选中行）
- 工具栏：点击
▶运行按钮
2.3 调试与检查输出
步骤 5：查看结果
- 右侧面板的“Output”标签显示返回值。
- “Console”标签显示
console.log输出。 - “Network”标签显示 fetch 请求详情（仅 Browser 环境）。
步骤 6：使用变量监视器
- 按 Cmd + Shift + W 打开监视面板。
- 输入表达式（如
res.status）实时查看值。
2.4 保存与导出
步骤 7：保存项目
- 自动保存：默认启用，无需手动操作。
- 另存为：Cmd + Shift + S，可保存为
.js或.ts文件。
步骤 8：导出结果
- 点击输出面板右上角“Export”按钮，可导出 JSON、HTML 或文本格式。
- 复制结果：右键输出内容 → “Copy Value”。
三、常用功能进阶技巧
3.1 快速代码片段管理
- 多光标编辑：按住 Option 点击创建多个光标，或 Cmd + D 选中相同词。
- 代码折叠：点击行号旁的箭头，或按 Cmd + Option + [/]。
- 快速跳转：Cmd + P 搜索文件，Cmd + G 跳转到行。
3.2 模块与包管理
- 安装 NPM 包：在编辑器输入
require('lodash')后，RunJS 会自动提示安装。 - 内置模块：可直接使用
fs、path、axios等，无需安装。 - 版本切换：在设置 → Environments 中可切换 Node.js 版本。
3.3 可视化数据展示
- 在输出面板使用
console.table(data)以表格形式显示数组/对象。 - Browser 环境下，
console.log输出 DOM 元素可点击查看。 - 使用
$$.plot(data)可快速绘制折线图/柱状图（需安装 charts 模块）。
四、常见问题与解决方案
注意：以下解决方案基于 RunJS 官方文档及常见使用场景。
4.1 代码执行问题
- 问题：“Cannot find module”错误。
- 解决：确保在正确的环境中运行（Node.js 环境才能使用 Node 模块）。
4.2 环境配置问题
- 问题：Browser 环境下无法访问本地文件。
- 解决：Browser 环境受沙盒限制，需切换至 Node.js 环境或使用 fetch 加载远程资源。
4.3 性能与显示问题
- 问题：输出面板日志过多导致卡顿。
- 解决：点击输出面板右上角“Clear”按钮，或使用
console.clear()。
五、快捷键汇总表
| 功能分类 | 操作描述 | Mac 快捷键 |
|---|---|---|
| 文件操作 | 新建代码片段 | Cmd + N |
| 保存文件 | Cmd + S | |
| 另存为 | Cmd + Shift + S | |
| 代码执行 | 运行全部代码 | Cmd + Enter |
| 运行选中代码 | Cmd + Shift + Enter | |
| 停止执行 | Cmd + . | |
| 编辑操作 | 格式化代码 | Cmd + Shift + F |
| 切换注释 | Cmd + / | |
| 查找 | Cmd + F | |
| 替换 | Cmd + Option + F | |
| 界面控制 | 切换侧边栏 | Cmd + B |
| 打开模块面板 | Cmd + Shift + M | |
| 打开变量监视器 | Cmd + Shift + W | |
| 切换全屏 | Cmd + Ctrl + F | |
| 调试相关 | 清空输出面板 | Cmd + K |
| 插入 console.log | Cmd + Shift + L |
总结：RunJS for Mac 作为轻量级 JavaScript/TypeScript playground，通过直观的双面板设计、实时执行反馈和丰富的环境支持，极大提升了代码原型验证和片段测试的效率。掌握上述核心操作流程与快捷键，可充分发挥其快速迭代的优势。
“`
