CNB 文档

简体中文

English

简体中文

English

外观

使用技巧

复制页面

1077 字约 4 分钟

WebIDE 使用技巧

如何避免剪贴板授权弹框

在浏览器中使用 Ctrl/Cmd + V 粘贴时，可能会弹出剪贴板授权弹窗。可通过以下方式避免：

  • 使用替代快捷键粘贴（不会触发 Chrome 剪贴板授权）：

    • Windows：Shift + Insert
    • macOS：Shift + Command + V

  • 在浏览器设置中永久授权。以 Chrome 为例：

    打开 chrome://settings/content/clipboard， 在「允许查看您的剪贴板」中添加 [*.]cnb.space。

如何避免系统字体授权弹窗

WebIDE 终端输入命令时，浏览器可能弹出系统字体授权弹窗。可打开 chrome://settings/content/localFonts， 在「可以使用您设备上安装的字体」中添加 [*.]cnb.space。

解决快捷键冲突

当 WebIDE 快捷键与浏览器快捷键冲突时，可以使用本地客户端进行远程开发。

VSCode 配置文件漫游

配置文件路径

WebIDE 配置文件（settings.json）路径：

  • 用户级别：~/.local/share/code-server/User/settings.json。配置按用户漫游，保存个人偏好
  • 机器级别：~/.local/share/code-server/Machine/settings.json。可在 .ide/Dockerfile 中修改，实现配置共享
  • 仓库级别：.vscode/settings.json。相对目录为当前工作区（默认为 /workspace），即仓库根目录

VSCode 客户端（Remote-SSH）配置文件（settings.json）路径：

  • 用户级别：存储在用户本地，可自行配置
  • 机器级别：~/.vscode-server/data/Machine/settings.json。可在 .ide/Dockerfile 中修改，实现配置共享
  • 仓库级别：.vscode/settings.json。相对目录为当前工作区（默认为 /workspace），即仓库根目录

更多共享策略

  • 用户级别共享：同一用户的配置漫游，不同用户隔离

WebIDE：用户级别的配置文件（settings.json）会自动漫游，且仅对当前用户生效。

注意：客户端的用户级别配置文件存储在本地，无法漫游。如需修改，请手动编辑本地配置文件。

  • 仓库级别共享：同一仓库的配置共享，不同仓库隔离

如何在同一仓库内共享配置：将 .vscode/settings.json 文件提交到仓库即可。

  • 环境级别共享：跨仓库的环境共享

如果你已有构建好的开发环境镜像，可以直接在 .cnb.yml 中使用：

.cnb.yml
$:
  vscode:
    - name: vscode
      services:
        - vscode
      docker:
        # 使用自定义镜像作为开发环境
        image: groupname/imagename:latest

如何安装 VSCode 扩展

在自定义开发环境时，可在 Dockerfile 中安装常用 VSCode 扩展以复用。 支持以下两种安装方式：

WebIDE 扩展源为 open-vsx（开源），非微软官方扩展源。如果 open-vsx 中缺少某个扩展，可从微软官方扩展源下载 .vsix 文件安装。

通过扩展 ID 安装

code-server --install-extension ${扩展 ID}

扩展 ID 可在 WebIDE 或 open-vsx 扩展详情页查看。例如 Python 扩展 ID 为 ms-python.python。

通过 VSIX 扩展文件安装

将 .vsix 安装包下载并提交到仓库，通过安装包安装：

code-server --install-extension ms-python.vscode-pylance.vsix

如果 open-vsx 中缺少某个扩展，可在微软官方扩展源下载 .vsix 文件安装。

下面以 Python 开发环境为例，安装 python（open-vsx 可用）和 pylance（open-vsx 缺少，需 .vsix 安装）两个扩展：

.cnb.yml
$:
  # vscode 事件：供页面中启动云原生开发使用
  vscode:
    - docker:
        # 自定义镜像作为开发环境
        build:
          dockerfile: .ide/Dockerfile
          # by: 声明构建镜像需要用到的文件
          by:
            - .ide/ms-python.vscode-pylance.vsix
          # versionBy: 声明版本控制需要用到的文件
          # 当 .ide/Dockerfile 和 versionBy 中的文件有更新时，会重新构建镜像
          versionBy:
            - .ide/ms-python.vscode-pylance.vsix
      services:
        - vscode
        - docker
      stages:
        - name: ls
          script: ls -al

注意：.ide 目录下需有 ms-python.vscode-pylance.vsix 扩展文件。

# .ide/Dockerfile
FROM python:3.8

COPY .ide/ms-python.vscode-pylance.vsix .

# 安装 code-server 和扩展（通过扩展 ID 安装 python 扩展，通过 .vsix 安装包安装 pylance 扩展）
RUN curl -fsSL https://code-server.dev/install.sh | sh \
  && code-server --install-extension ms-python.python \
  && code-server --install-extension ./ms-python.vscode-pylance.vsix \
  && echo done

# 安装 ssh 服务，用于支持 VSCode 客户端通过 Remote-SSH 访问开发环境
RUN apt-get update && apt-get install -y wget unzip openssh-server

# 指定字符集以支持命令行中文输入（按需选择字符集）
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8
© 2026 cnb.cool