---
url: /en/workspaces/usage-tips.md
description: >
  Practical tips for using Workspaces, including clipboard/font permission
  pop-up avoidance, shortcut conflict resolution, and VSCode client
  configuration.
---
## WebIDE Usage Tips

### How to Avoid the Clipboard Permission Pop-up

When using `Ctrl/Cmd + V` to paste in the browser,
a clipboard permission pop-up may appear. You can avoid this with the following methods:

* Use alternative shortcuts (these won't trigger Chrome's clipboard permission pop-up):
  * Windows: `Shift + Insert`
  * macOS: `Shift + Command + V`

* Permanently authorize in browser settings. For Chrome:

  Open `chrome://settings/content/clipboard`,
  and add `[*.]cnbprod.alpha.qq.com` under **"Sites can ask to view text and images from your clipboard"**.

### How to Avoid the System Font Permission Pop-up

When entering commands in the WebIDE terminal,
the browser may show a system font permission pop-up.
Open `chrome://settings/content/localFonts`,
and add `[*.]cnbprod.alpha.qq.com` under **"Sites can ask to use fonts installed on your device"**.

### Resolving Shortcut Conflicts

When WebIDE shortcuts conflict with browser shortcuts,
use the local client for remote development.

## VSCode Configuration File Roaming

### Configuration File Paths

**WebIDE configuration file (`settings.json`) paths:**

* User dimension: `~/.local/share/code-server/User/settings.json`.
  Configuration will roam by user dimension to save personal settings
* Machine dimension: `~/.local/share/code-server/Machine/settings.json`.
  Can be modified in .ide/Dockerfile to achieve configuration sharing
* Repository dimension: `.vscode/settings.json`.
  Relative to current workspace (default is `/workspace`), i.e., repository root directory

**VSCode client (Remote-SSH) configuration file (`settings.json`) paths:**

* User dimension: Stored locally on user's machine, can be configured manually
* Machine dimension: `~/.vscode-server/data/Machine/settings.json`.
  Can be modified in .ide/Dockerfile to achieve configuration sharing
* Repository dimension: `.vscode/settings.json`.
  Relative to current workspace (default is `/workspace`), i.e., repository root directory

### More Sharing Strategies

* **User dimension sharing: Enables configuration sharing for the same user
  while isolating different users**

For WebIDE: User dimension configuration file (`settings.json`)
will automatically roam and only affect the user themselves.

Note: For clients, the user-level configuration file is stored locally and cannot roam.
If configuration changes are needed, modify the local configuration file manually.

* **Repository dimension sharing:
  Enables configuration sharing within the same repository while isolating different repositories**

How to share configuration within the same repository:
Simply commit `.vscode/settings.json` file to the repository.

* **Environment dimension sharing: Enables cross-repository environment sharing**

If you already have a built development environment image,
you can directly use it in `.cnb.yml` configuration:

```yaml{7} title=".cnb.yml"
$:
  vscode:
    - name: vscode
      services:
        - vscode
      docker:
        image: groupname/imagename:latest
```

## How to Install VSCode Extensions

When customizing a development environment,
you can pre-install commonly used VSCode extensions in a Dockerfile for reuse.
There are two installation methods:

> WebIDE uses `open-vsx` (open source) as its extension source,
> not the Microsoft official extension source. If an extension is
> missing from `open-vsx`, you can download a `.vsix` package
> from the Microsoft source to install.

### Install via Extension ID

`code-server --install-extension ${extension ID}`

> Extension ID can be found on the extension details page in WebIDE
> or open-vsx. For example, the Python extension ID is
> `ms-python.python`.

### Install via VSIX Extension File

Download the `.vsix` package and commit it to the repository, then install via the package:

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

> If an extension is missing from open-vsx, download the `.vsix` file from the Microsoft official source to install.

Below is an example for Python development, installing `python`
(available in open-vsx) and `pylance` (not available in open-vsx,
requires `.vsix`).

The `vscode` event launches Workspaces from the page:

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

Example `.ide/Dockerfile` (requires `ms-python.vscode-pylance.vsix` in the `.ide` directory):

```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
```