---
title: VS Code 扩展
description: 无需离开 Visual Studio Code，即可从状态栏一键启动、停止和重启 Jamdesk 开发服务器，并在就绪后自动打开浏览器预览。
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

无需离开 Visual Studio Code 即可预览文档。Jamdesk 扩展会添加一个状态栏按钮，用于启动 `jamdesk dev`、监控服务器，并在服务器就绪后打开浏览器。无需使用终端。

## 前置条件

- 已安装 [Jamdesk CLI](/cn/cli/overview)（`npm install -g jamdesk`）
- 工作区中包含 `docs.json` 文件

## 安装扩展

在 VS Code 的 Extensions 面板中搜索 **Jamdesk**（macOS 使用 `Cmd+Shift+X`，Windows/Linux 使用 `Ctrl+Shift+X`），然后点击 **Install**。也可以直接从 [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Jamdesk.jamdesk) 安装。

当工作区中包含 `docs.json` 文件时，扩展会自动激活。状态栏中会显示播放按钮。

## 启动开发服务器

点击状态栏中的播放按钮，启动开发服务器。扩展会：

1. 将 `jamdesk dev` 作为子进程启动
2. 监控输出，以检测服务器何时就绪
3. 在浏览器中打开本地预览（如果启用了自动打开）

状态栏会显示当前服务器状态：启动中、运行中或已停止。

## 命令

打开 Command Palette（`Cmd+Shift+P` / `Ctrl+Shift+P`），输入“Jamdesk”即可访问：

| 命令 | 描述 |
|---------|-------------|
| **Jamdesk: Start Dev Server** | 启动开发服务器 |
| **Jamdesk: Stop Dev Server** | 停止正在运行的服务器 |
| **Jamdesk: Restart Dev Server** | 重启服务器 |
| **Jamdesk: Show Output** | 显示 CLI 输出通道 |

## 设置

在 VS Code 设置中配置扩展（`Cmd+,` / `Ctrl+,`），位置为 **Jamdesk**：

| 设置 | 默认值 | 描述 |
|---------|---------|-------------|
| `jamdesk.port` | `3000` | 首选开发服务器端口 |
| `jamdesk.verbose` | `false` | 启用详细 CLI 输出 |
| `jamdesk.clean` | `false` | 下次启动时清除构建缓存 |
| `jamdesk.browserMode` | `external` | 预览打开位置：`external`（系统浏览器）或 `embedded`（VS Code 侧边面板） |
| `jamdesk.autoOpenBrowser` | `true` | 服务器就绪后打开浏览器 |

<Tip>
将 `browserMode` 设置为 `embedded`，即可在 VS Code 侧边面板中打开文档预览。这样无需切换窗口，便可并排编辑和预览。
</Tip>

## 智能端口处理

如果首选端口已被占用，CLI 会自动递增到下一个可用端口。扩展会从 CLI 输出中检测实际端口，因此浏览器始终会打开正确的 URL。

## 输出通道

扩展会将所有 CLI 输出流式传输到专用的 **Jamdesk** 输出通道。使用 **Jamdesk: Show Output** 命令，或从 Output 面板的下拉菜单中打开该通道。

可使用此通道来：

- 监控构建进度
- 调试服务器问题
- 查看详细日志（启用 `jamdesk.verbose` 时）

## 接下来做什么？

<Columns cols={2}>
  <Card title="本地预览" icon="eye" href="/cn/development/local-preview">
    基于 CLI 的预览，支持自定义端口和详细模式
  </Card>
  <Card title="CLI 概览" icon="terminal" href="/cn/cli/overview">
    完整的 CLI 命令参考
  </Card>
</Columns>