---
url: /zh/workspaces/usage-tips.md
description: |
  介绍云原生开发的实用技巧， 包括 WebIDE 剪贴板授权、系统字体弹窗、快捷键冲突的解决方法， 以及 VSCode 客户端的配置和使用建议。
---
## WebIDE 使用技巧

### 如何避免剪贴板授权弹框

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

* 使用替代快捷键粘贴（不会触发 Chrome 剪贴板授权）：
  * Windows：`Shift + Insert`
  * macOS：`Shift + Command + V`

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

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

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

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

### 解决快捷键冲突

当 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` 中使用：

```yaml{7} title=".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` 安装）两个扩展。

`vscode` 事件用于页面中启动云原生开发：

```yaml title=".cnb.yml"
$:
  vscode:
    - docker:
        build:
          dockerfile: .ide/Dockerfile
      services:
        - vscode
        - docker
```

`.ide/Dockerfile` 示例（需将 `ms-python.vscode-pylance.vsix` 文件放入 `.ide` 目录）：

```dockerfile
FROM python:3.8

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

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

RUN apt-get update && apt-get install -y wget unzip openssh-server

ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8
```